fix: passing external on layout (#4204)

callstack · Nov 27, 2023 · 6ee89ee · 6ee89ee
1 parent 27e8234
commit 6ee89ee
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -514,7 +514,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
           onBlur={handleBlur}
           onChangeText={handleChangeText}
           onLayoutAnimatedText={handleLayoutAnimatedText}
-          onLayout={handleInputContainerLayout}
+          onInputLayout={handleInputContainerLayout}
           onLabelTextLayout={handleLabelTextLayout}
           onLeftAffixLayoutChange={onLeftAffixLayoutChange}
           onRightAffixLayoutChange={onRightAffixLayoutChange}
@@ -553,7 +553,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
         onFocus={handleFocus}
         forceFocus={forceFocus}
         onBlur={handleBlur}
-        onLayout={handleInputContainerLayout}
+        onInputLayout={handleInputContainerLayout}
         onChangeText={handleChangeText}
         onLayoutAnimatedText={handleLayoutAnimatedText}
         onLabelTextLayout={handleLabelTextLayout}

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -68,7 +68,7 @@ const TextInputFlat = ({
   onLabelTextLayout,
   onLeftAffixLayoutChange,
   onRightAffixLayoutChange,
-  onLayout,
+  onInputLayout,
   left,
   right,
   placeholderTextColor,
@@ -343,7 +343,7 @@ const TextInputFlat = ({
         theme={theme}
       />
       <View
-        onLayout={onLayout}
+        onLayout={onInputLayout}
         style={[
           styles.labelContainer,
           {

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -8,6 +8,7 @@ import {
   Platform,
   TextStyle,
   ColorValue,
+  LayoutChangeEvent,
 } from 'react-native';
 
 import { Outline } from './Addons/Outline';
@@ -68,6 +69,7 @@ const TextInputOutlined = ({
   onLabelTextLayout,
   onLeftAffixLayoutChange,
   onRightAffixLayoutChange,
+  onInputLayout,
   onLayout,
   left,
   right,
@@ -249,6 +251,14 @@ const TextInputOutlined = ({
     isV3,
   };
 
+  const onLayoutChange = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      onInputLayout(e);
+      onLayout?.(e);
+    },
+    [onLayout, onInputLayout]
+  );
+
   const minHeight = (height ||
     (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
 
@@ -364,7 +374,7 @@ const TextInputOutlined = ({
         {render?.({
           ...rest,
           ref: innerRef,
-          onLayout,
+          onLayout: onLayoutChange,
           onChangeText,
           placeholder: label ? parentState.placeholder : rest.placeholder,
           editable: !disabled && editable,

diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -86,6 +86,7 @@ export type ChildTextInputProps = {
   onBlur?: (args: any) => void;
   forceFocus: () => void;
   onChangeText?: (value: string) => void;
+  onInputLayout: (event: LayoutChangeEvent) => void;
   onLayoutAnimatedText: (args: any) => void;
   onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
   onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;