fix: adjust initial placeholder text value (#3331)

callstack · Oct 2, 2022 · 689961e · 689961e
1 parent 3919be9
commit 689961e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -216,7 +216,7 @@ const TextInput = React.forwardRef<TextInputHandles, Props>(
     );
     const [focused, setFocused] = React.useState<boolean>(false);
     const [placeholder, setPlaceholder] = React.useState<string | undefined>(
-      ''
+      ' '
     );
     const [uncontrolledValue, setUncontrolledValue] = React.useState<
       string | undefined
@@ -299,7 +299,15 @@ const TextInput = React.forwardRef<TextInputHandles, Props>(
         ) as unknown as NodeJS.Timeout;
       } else {
         // hidePlaceholder
-        setPlaceholder('');
+
+        // Issue: https://github.com/callstack/react-native-paper/issues/3138
+        // Description:   Changing the placeholder text value dynamically,
+        //                within multiline input on iOS, doesn't work properly –
+        //                the placeholder is not displayed initially.
+        // 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(' ');
       }
 
       return () => {

diff --git a/src/components/__tests__/TextInput.test.js b/src/components/__tests__/TextInput.test.js
@@ -200,6 +200,14 @@ it('renders outlined input with custom font variant', () => {
   );
 });
 
+it('renders input placeholder initially with an empty space character', () => {
+  const { getByTestId } = render(
+    <TextInput multiline label="Multiline input" />
+  );
+
+  expect(getByTestId('text-input-flat').props.placeholder).toBe(' ');
+});
+
 describe('maxFontSizeMultiplier', () => {
   const createInput = (type, maxFontSizeMultiplier) => {
     return (

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -155,7 +155,7 @@ exports[`correctly applies a component as the text label 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=""
+      placeholder=" "
       placeholderTextColor="rgba(0, 0, 0, 0.54)"
       rejectResponderTermination={true}
       selectionColor="#6200ee"
@@ -338,7 +338,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=""
+      placeholder=" "
       placeholderTextColor="rgba(0, 0, 0, 0.54)"
       rejectResponderTermination={true}
       selectionColor="#6200ee"
@@ -572,7 +572,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
-        placeholder=""
+        placeholder=" "
         placeholderTextColor="rgba(0, 0, 0, 0.54)"
         rejectResponderTermination={true}
         selectionColor="#6200ee"
@@ -754,7 +754,7 @@ exports[`correctly applies textAlign center 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=""
+      placeholder=" "
       placeholderTextColor="rgba(0, 0, 0, 0.54)"
       rejectResponderTermination={true}
       selectionColor="#6200ee"
@@ -937,7 +937,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=""
+      placeholder=" "
       placeholderTextColor="rgba(0, 0, 0, 0.54)"
       rejectResponderTermination={true}
       selectionColor="#6200ee"
@@ -1246,7 +1246,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=""
+      placeholder=" "
       placeholderTextColor="rgba(0, 0, 0, 0.54)"
       rejectResponderTermination={true}
       selectionColor="#6200ee"