fix(text-input-affix): fix right TextInput.Affix alignment with onPre…

…ss (#4415)
callstack · Jul 27, 2024 · f577097 · f577097
1 parent 1a82b2c
commit f577097
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 65 deletions.
diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx
@@ -153,7 +153,18 @@ const TextInputAffix = ({
 
   const textColor = getTextColor({ theme, disabled });
 
-  const affix = (
+  const content = (
+    <Text
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      style={[{ color: textColor }, textStyle, labelStyle]}
+      onLayout={onTextLayout}
+      testID={`${testID}-text`}
+    >
+      {text}
+    </Text>
+  );
+
+  return (
     <Animated.View
       style={[
         styles.container,
@@ -169,30 +180,19 @@ const TextInputAffix = ({
       onLayout={onLayout}
       testID={testID}
     >
-      <Text
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-        style={[{ color: textColor }, textStyle, labelStyle]}
-        onLayout={onTextLayout}
-        testID={`${testID}-text`}
-      >
-        {text}
-      </Text>
+      {onPress ? (
+        <Pressable
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        content
+      )}
     </Animated.View>
   );
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        style={styles.container}
-      >
-        {affix}
-      </Pressable>
-    );
-  }
-  return affix;
 };
 
 TextInputAffix.displayName = 'TextInput.Affix';

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -224,61 +224,54 @@ exports[`call onPress when affix adornment pressed 1`] = `
     />
   </View>
   <View
-    accessibilityLabel="+39"
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
     collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    onLayout={[Function]}
     style={
       {
         "alignItems": "center",
         "justifyContent": "center",
+        "left": 16,
+        "opacity": 0,
         "position": "absolute",
+        "top": null,
       }
     }
+    testID="left-affix-adornment"
   >
     <View
-      collapsable={false}
-      onLayout={[Function]}
-      style={
+      accessibilityLabel="+39"
+      accessibilityRole="button"
+      accessibilityState={
         {
-          "alignItems": "center",
-          "justifyContent": "center",
-          "left": 16,
-          "opacity": 0,
-          "position": "absolute",
-          "top": null,
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-      testID="left-affix-adornment"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
     >
       <Text
         maxFontSizeMultiplier={1.5}