Fix placeholder bugs when value isn't passed

Expensify · Jan 18, 2024 · 854d388 · 854d388
1 parent 1c9efc4
commit 854d388
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -124,6 +124,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       return e;
     }, []);
 
+    // Placeholder text color logic
+    const updateTextColor = useCallback((target: HTMLDivElement, text: string) => {
+      const node = target;
+      node.style.color = String(placeholder && (text === '' || text === '\n') ? placeholderTextColor : (style as TextStyle).color || 'black');
+    }, []);
+
     const handleKeyPress = useCallback(
       (e: KeyboardEvent<HTMLDivElement>) => {
         const hostNode = e.target;
@@ -173,6 +179,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           return;
         }
 
+        updateTextColor(divRef.current, e.target.innerText);
+
         const text = parseText(divRef.current, e.target.innerText, processedMarkdownStyle, !multiline);
         if (onChange) {
           const event = e as unknown as NativeSyntheticEvent<any>;
@@ -182,9 +190,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         if (onChangeText) {
           const normalizedText = normalizeValue(text);
-          if (onChangeText !== undefined) {
-            onChangeText(normalizedText);
-          }
+          onChangeText(normalizedText);
         }
       },
       [multiline, onChange, onChangeText, setEventProps],
@@ -267,10 +273,14 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       const r = currentRef;
       if (r) {
         (r as unknown as TextInput).isFocused = () => document.activeElement === r;
-        (r as unknown as TextInput).clear = () => r.innerText && (r.innerText = '');
+        (r as unknown as TextInput).clear = () => {
+          r.innerText = '';
+          updateTextColor(r, '');
+        };
 
-        // Placeholder text color logic
-        r.style.color = String(placeholder && ((!value && (r.innerText === '' || r.innerText === '\n')) || value === '') ? placeholderTextColor : (style as TextStyle).color || 'black');
+        if (value === undefined) {
+          updateTextColor(r, r.innerText);
+        }
       }
 
       if (ref) {
@@ -298,6 +308,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         };
         setCursorPosition(divRef.current, text.length, !multiline);
       }
+      updateTextColor(divRef.current, value);
     }, [multiline, processedMarkdownStyle, processedValue]);
 
     return (