fix: [WOAUILIB-3903] TextField multiline auto-expanding on web (#2874)

* fix: [WOAUILIB-3903] TextField multiline auto-expanding on web

* small fixes

Author: AmitShwarts

src/components/textField/Input.tsx

@@ -1,5 +1,6 @@
 import React, {useContext, useMemo} from 'react';
-import {TextInput as RNTextInput, StyleSheet, Platform} from 'react-native';
+import {StyleSheet, Platform} from 'react-native';
+import {TextInput as RNTextInput} from './textInput';
 import {Constants, ForwardRefInjectedProps} from '../../commons/new';
 import {InputProps} from './types';
 import {getColorByState} from './Presenter';

src/components/textField/textInput/index.tsx

@@ -0,0 +1 @@
+export {TextInput} from 'react-native';

src/components/textField/textInput/index.web.tsx

@@ -0,0 +1,43 @@
+import React, {type BaseSyntheticEvent, useCallback} from 'react';
+import {TextInput as RNTextInput, type TextInputChangeEventData, type TextInputProps, type LayoutChangeEvent} from 'react-native';
+
+const adjustInputHeight = (element: BaseSyntheticEvent<TextInputProps, TextInputProps>['target']) => {
+  element.style.height = 0;
+  const newHeight = element.offsetHeight - element.clientHeight + element.scrollHeight;
+  element.style.height = `${newHeight}px`;
+};
+
+// we need this wrapper of TextInput on web because of multiline bug in react-native-web
+// https://github.com/necolas/react-native-web/issues/795
+export const TextInput = (props: TextInputProps) => {
+  const {multiline, onChange, onLayout, ...other} = props;
+
+  const _onLayout = useCallback((event: LayoutChangeEvent) => {
+    const element = event?.target;
+
+    if (element && multiline) {
+      adjustInputHeight(element);
+    }
+
+    onLayout?.(event);
+  }, [multiline, onLayout]);
+
+  const _onChange = useCallback((event: BaseSyntheticEvent<TextInputChangeEventData>) => {
+    const element = event?.target || event?.nativeEvent?.target;
+    
+    if (element && multiline) {
+      adjustInputHeight(element);
+    }
+
+    onChange?.(event);
+  }, [multiline, onChange]);
+
+  return (
+    <RNTextInput
+      {...other}
+      multiline={multiline}
+      onChange={_onChange}
+      onLayout={_onLayout}
+    />
+  );
+};

webDemo/src/App.tsx

@@ -216,6 +216,7 @@ const itemsToRender: ItemToRender[] = [
           <Incubator.TextField
             text70
             migrate
+            multiline
             defaultValue={defaultValue}
             containerStyle={{marginBottom: 10}}
             placeholder="Enter your email..."