fix: custom input styling in TextInput (#3648) (#3649)

callstack · Feb 6, 2023 · e4c2e9d · e4c2e9d
1 parent 0970f64
commit e4c2e9d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -537,7 +537,7 @@ const TextInputExample = () => {
             mode="flat"
             style={styles.inputContainerStyle}
             label="Custom style input"
-            placeholder="Input with custom padding"
+            placeholder="Input with custom style"
             value={customStyleText}
             onChangeText={(customStyleText) =>
               inputActionHandler('customStyleText', customStyleText)
@@ -628,6 +628,8 @@ const styles = StyleSheet.create({
   },
   inputContentStyle: {
     paddingLeft: 50,
+    fontWeight: 'bold',
+    fontStyle: 'italic',
   },
   fontSize: {
     fontSize: 32,

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -29,7 +29,6 @@ const InputLabel = (props: InputLabelProps) => {
     labelTranslationXOffset,
     maxFontSizeMultiplier,
     testID,
-    contentStyle,
     theme,
   } = props.labelProps;
 
@@ -50,10 +49,12 @@ const InputLabel = (props: InputLabelProps) => {
     fontSize,
     lineHeight,
     fontWeight,
-    opacity: parentState.labeled.interpolate({
-      inputRange: [0, 1],
-      outputRange: [hasActiveOutline ? 1 : 0, 0],
-    }),
+    opacity: hasActiveOutline
+      ? parentState.labeled.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0],
+        })
+      : 0,
     transform: [
       {
         // Wiggle the label when there's an error
@@ -148,7 +149,6 @@ const InputLabel = (props: InputLabelProps) => {
             color: textColor,
             opacity: placeholderOpacity,
           },
-          contentStyle,
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -345,7 +345,6 @@ const TextInput = forwardRef<TextInputHandles, Props>(
         // Root cause:    Placeholder initial value, which has length 0.
         // More context:  The issue was also reproduced in react-native, using its own TextInput.
         // Workaround:    Set an empty space character in the default value.
-
         setPlaceholder(' ');
       }
 

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -744,7 +744,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "letterSpacing": 0.15,
             "lineHeight": undefined,
             "opacity": 0,
-            "paddingLeft": 20,
+            "paddingLeft": 16,
             "paddingRight": 16,
             "position": "absolute",
             "textAlign": "left",