fix: calls onLayout on input affix (#3597)

Author: lukewalczak

src/components/TextInput/Adornment/TextInputAffix.tsx

@@ -118,6 +118,7 @@ const TextInputAffix = ({
   text,
   textStyle: labelStyle,
   theme: themeOverrides,
+  onLayout: onTextLayout,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { AFFIX_OFFSET } = getConstants(theme.isV3);
@@ -167,6 +168,8 @@ const TextInputAffix = ({
       <Text
         maxFontSizeMultiplier={maxFontSizeMultiplier}
         style={[{ color: textColor }, textStyle, labelStyle]}
+        onLayout={onTextLayout}
+        testID={`${testID}-text`}
       >
         {text}
       </Text>

src/components/__tests__/TextInput.test.js

@@ -289,6 +289,28 @@ it('correctly applies padding offset to input label on Android when LTR', () =>
   });
 });
 
+it('calls onLayout on right-side affix adornment', () => {
+  const onLayoutMock = jest.fn();
+  const nativeEventMock = {
+    nativeEvent: { layout: { height: 100 } },
+  };
+
+  const { getByTestId } = render(
+    <TextInput
+      label="Flat input"
+      placeholder="Type something"
+      value={'Some test value'}
+      right={<TextInput.Affix text={affixTextValue} onLayout={onLayoutMock} />}
+    />
+  );
+  fireEvent(
+    getByTestId('right-affix-adornment-text'),
+    'onLayout',
+    nativeEventMock
+  );
+  expect(onLayoutMock).toHaveBeenCalledWith(nativeEventMock);
+});
+
 ['outlined', 'flat'].forEach((mode) =>
   it(`renders ${mode} input with correct line height`, () => {
     const input = render(

src/components/__tests__/__snapshots__/TextInput.test.js.snap

@@ -1263,6 +1263,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
           },
         ]
       }
+      testID="left-affix-adornment-text"
     >
       /100
     </Text>
@@ -1817,6 +1818,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           },
         ]
       }
+      testID="right-affix-adornment-text"
     >
       /100
     </Text>