Merge pull request #46626 from Expensify/revert-46091-fix/37896-compo…

…ser-not-cleared

Revert "Composer: add clear command that bypasses the event count"

(cherry picked from commit 7ef4912)

patches/react-native+0.73.4+022+textInputClear.patch

@@ -0,0 +1,66 @@
+diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
+index 7ce04da..123968f 100644
+--- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
++++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
+@@ -452,6 +452,12 @@ - (void)blur
+   [_backedTextInputView resignFirstResponder];
+ }
+
++- (void)clear
++{
++    [self setTextAndSelection:_mostRecentEventCount value:@"" start:0 end:0];
++    _mostRecentEventCount++;
++}
++
+ - (void)setTextAndSelection:(NSInteger)eventCount
+                       value:(NSString *__nullable)value
+                       start:(NSInteger)start
+diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputNativeCommands.h b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputNativeCommands.h
+index fe3376a..6a9a45f 100644
+--- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputNativeCommands.h
++++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputNativeCommands.h
+@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
+ @protocol RCTTextInputViewProtocol <NSObject>
+ - (void)focus;
+ - (void)blur;
++- (void)clear;
+ - (void)setTextAndSelection:(NSInteger)eventCount
+                       value:(NSString *__nullable)value
+                       start:(NSInteger)start
+@@ -49,6 +50,19 @@ RCTTextInputHandleCommand(id<RCTTextInputViewProtocol> componentView, const NSSt
+     return;
+   }
+
++  if ([commandName isEqualToString:@"clear"]) {
++#if RCT_DEBUG
++    if ([args count] != 0) {
++      RCTLogError(
++          @"%@ command %@ received %d arguments, expected %d.", @"TextInput", commandName, (int)[args count], 0);
++      return;
++    }
++#endif
++
++    [componentView clear];
++    return;
++  }
++
+   if ([commandName isEqualToString:@"setTextAndSelection"]) {
+ #if RCT_DEBUG
+     if ([args count] != 4) {
+diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
+index 8496a7d..e6bcfc4 100644
+--- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
++++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
+@@ -331,6 +331,12 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
+         }
+         reactEditText.maybeSetSelection(mostRecentEventCount, start, end);
+         break;
++      case "clear":
++        int newEventCount = reactEditText.incrementAndGetEventCounter();
++        ReactTextUpdate textUpdate = getReactTextUpdate("", newEventCount);
++        reactEditText.maybeSetTextFromJS(textUpdate);
++        reactEditText.maybeSetSelection(newEventCount, 0, 0);
++        break;
+     }
+   }
+

src/components/Composer/index.native.tsx

@@ -1,7 +1,7 @@
 import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
 import type {ForwardedRef} from 'react';
-import React, {useCallback, useMemo, useRef} from 'react';
-import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData} from 'react-native';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
@@ -19,7 +19,8 @@ const excludeReportMentionStyle: Array<keyof MarkdownStyle> = ['mentionReport'];
 
 function Composer(
     {
-        onClear: onClearProp = () => {},
+        shouldClear = false,
+        onClear = () => {},
         isDisabled = false,
         maxLines,
         isComposerFullSize = false,
@@ -63,12 +64,13 @@ function Composer(
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
-    const onClear = useCallback(
-        ({nativeEvent}: NativeSyntheticEvent<TextInputChangeEventData>) => {
-            onClearProp(nativeEvent.text);
-        },
-        [onClearProp],
-    );
+    useEffect(() => {
+        if (!shouldClear) {
+            return;
+        }
+        textInput.current?.clear();
+        onClear();
+    }, [shouldClear, onClear]);
 
     const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
     const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]);
@@ -97,7 +99,6 @@ function Composer(
                 }
                 props?.onBlur?.(e);
             }}
-            onClear={onClear}
         />
     );
 }