Incorrect behaviour onContentSizeChange #2160

Activity

1. eseQ commented on Dec 9, 2021

   

   eseQ

   on Dec 9, 2021

   Author

   More actions

   @necolas can you help me?
2. rissois commented on Dec 23, 2021

   

   rissois

   on Dec 23, 2021

   Last edited by rissois

   More actions

   @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.
3. eseQ commented on Dec 23, 2021

   

   eseQ

   on Dec 23, 2021

   Author

   More actions

   @rissois thanks for your reply. I'll check the issue later. It seems like useful idea.
4. eseQ commented on Dec 23, 2021

   

   eseQ

   on Dec 23, 2021

   Last edited by eseQ

   Author

   More actions

   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.

   🎉React with 🎉5Reacted by Haci Seydaoğlu, Humaid Khan, jaxoncreed, Paul and Kesha

   ❤️React with ❤️2Reacted by Haci Seydaoğlu and Kesha

   🚀React with 🚀2Reacted by Haci Seydaoğlu and Kesha
5. necolas

   added

   project:react-native-webIssue associated with react-native-webIssue associated with react-native-web

   on Jul 2, 2022
6. shawhu commented on Oct 6, 2024

   

   shawhu

   on Oct 6, 2024

   Last edited by shawhu

   More actions

   I am having the same problem. on web platform, the onContentSizeChange won't fire.
   I'm using the latest expo.dev

   "dependencies": {
   "@expo/vector-icons": "^14.0.2",
   "@react-native-async-storage/async-storage": "^1.23.1",
   "@react-navigation/native": "^6.0.2",
   "deepmerge-ts": "^7.1.1",
   "expo": "~51.0.28",
   "expo-asset": "~10.0.10",
   "expo-constants": "~16.0.2",
   "expo-font": "~12.0.9",
   "expo-linking": "~6.3.1",
   "expo-router": "~3.5.23",
   "expo-splash-screen": "~0.27.5",
   "expo-status-bar": "~1.12.1",
   "expo-system-ui": "~3.0.7",
   "expo-web-browser": "~13.0.3",
   "markdown-it": "^14.1.0",
   "react": "18.2.0",
   "react-dom": "18.2.0",
   "react-native": "0.74.5",
   "react-native-gesture-handler": "~2.16.1",
   "react-native-paper": "^5.12.5",
   "react-native-paper-alerts": "^0.1.3",
   "react-native-reanimated": "~3.10.1",
   "react-native-root-siblings": "^5.0.1",
   "react-native-safe-area-context": "4.10.5",
   "react-native-screens": "3.31.1",
   "react-native-uuid": "^2.0.2",
   "react-native-web": "~0.19.10"
   },

   my code:

   <TextInput
         multiline={true}
         style={{ height: Math.max(inputHeight, inputDefaultHeight), padding: 10, textAlignVertical: "top" }}
         onContentSizeChange={(event) => {
           const contentHeight = event.nativeEvent.contentSize.height;
           console.log(`contentHeight: ${contentHeight}`); //this wont execute on web
           setInputHeight(contentHeight);
         }}
         value={inputText}
         onChangeText={(text) => {
           setInputText(text);
         }}
       />
   
7. vishnuc commented on Mar 26, 2025

   

   vishnuc

   on Mar 26, 2025

   More actions

   HI , same issue how to fix this issue , its increasing but not decreasing ?

   👍React with 👍2Reacted by Kesha and Pato Sala
8. PatoSala commented on Jan 23, 2026

   

   PatoSala

   on Jan 23, 2026

   More actions

   HI , same issue how to fix this issue , its increasing but not decreasing ?

   Same issue here