Incorrect behaviour onContentSizeChange

[eseQ]

The problem onContentSizeChange property on <TextInput /> has incorrect behaviour. When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.

How to reproduce Simplified test case: https://codesandbox.io/s/issue-react-native-for-web-forked-23rm3

Steps to reproduce:

1. Type some text for multiline (3 lines for example)
2. remove one line

Expected behavior To see expected behaviour easy enough switch the version to 0.14.3 in the codesandbox

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.17
• React (version): 16.8.4
• Browser: 16.8.4

Additional context That issue report based on #1339 The behaviour changed in version 0.14.4. In 0.14.3 that work correct and the reported content size is indeed the size of the content The version 0.14.4 has two commits:

1. [fix] Avoid usePlatformMethods excess ref creation
2. [fix] Prevent onClick being called when certain roles are disabled

[eseQ]

@necolas can you help me?

[rissois]

@eseQ Have you looked at this other issue #795, particularly this code ? It may be what you need.

Otherwise, try manually reversing those two commits to see if you can debug the offending line(s) of code.

EDIT: I retract this answer, seems to also be a one-way size increase. Perhaps other answers in there might help, I have no explored them all as they were not needed in my use case.

[eseQ]

@rissois thanks for your reply. I'll check the issue later. It seems like useful idea.

[eseQ]

Solution is here:

type TICED = Omit<TextInputChangeEventData, 'target'> & { target: HTMLElement }
type OnChange = NativeSyntheticEvent<TICED>;
useEffect(() => {
  const element = ref.current as unknown as HTMLElement;
  if (Platform.OS === 'web' && !!element) {
    window.requestAnimationFrame(() => {
      element.style.height = '0px';
      element.style.height = `${element.scrollHeight}px`;
    });
  }
}, []);
const onChange = useCallback((e: OnChange) => {
  if (Platform.OS !== 'web') return;
  window.requestAnimationFrame(() => {
    e.nativeEvent.target.style.height = '0px';
    e.nativeEvent.target.style.height = `${e.nativeEvent.target.scrollHeight}px`;
  });
}, []);

but is only a hack. Still waiting for regular fix.