Merge pull request #46056 from Expensify/revert-45613-fix/composer-not-clearing-force-clear-event

Author: francoisl

src/libs/ComponentUtils/index.native.ts

@@ -1,20 +1,7 @@
-import type {Component} from 'react';
-import type {AnimatedRef} from 'react-native-reanimated';
-import {dispatchCommand} from 'react-native-reanimated';
 import type {AccessibilityRoleForm, NewPasswordAutocompleteType, PasswordAutocompleteType} from './types';
 
 const PASSWORD_AUTOCOMPLETE_TYPE: PasswordAutocompleteType = 'password';
 const NEW_PASSWORD_AUTOCOMPLETE_TYPE: NewPasswordAutocompleteType = 'password-new';
 const ACCESSIBILITY_ROLE_FORM: AccessibilityRoleForm = 'none';
 
-/**
- * Clears a text input on the UI thread using a custom clear command
- * that bypasses the event count check.
- */
-function forceClearInput(animatedInputRef: AnimatedRef<Component>) {
-    'worklet';
-
-    dispatchCommand(animatedInputRef, 'clear');
-}
-
-export {PASSWORD_AUTOCOMPLETE_TYPE, ACCESSIBILITY_ROLE_FORM, NEW_PASSWORD_AUTOCOMPLETE_TYPE, forceClearInput};
+export {PASSWORD_AUTOCOMPLETE_TYPE, ACCESSIBILITY_ROLE_FORM, NEW_PASSWORD_AUTOCOMPLETE_TYPE};

src/libs/ComponentUtils/index.ts

@@ -1,6 +1,3 @@
-import type {Component} from 'react';
-import type {AnimatedRef} from 'react-native-reanimated';
-import {setNativeProps} from 'react-native-reanimated';
 import type {AccessibilityRoleForm, NewPasswordAutocompleteType, PasswordAutocompleteType} from './types';
 
 /**
@@ -10,10 +7,4 @@ const PASSWORD_AUTOCOMPLETE_TYPE: PasswordAutocompleteType = 'current-password';
 const NEW_PASSWORD_AUTOCOMPLETE_TYPE: NewPasswordAutocompleteType = 'new-password';
 const ACCESSIBILITY_ROLE_FORM: AccessibilityRoleForm = 'form';
 
-function forceClearInput(animatedInputRef: AnimatedRef<Component>) {
-    'worklet';
-
-    setNativeProps(animatedInputRef, {text: ''});
-}
-
-export {PASSWORD_AUTOCOMPLETE_TYPE, ACCESSIBILITY_ROLE_FORM, NEW_PASSWORD_AUTOCOMPLETE_TYPE, forceClearInput};
+export {PASSWORD_AUTOCOMPLETE_TYPE, ACCESSIBILITY_ROLE_FORM, NEW_PASSWORD_AUTOCOMPLETE_TYPE};

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -4,7 +4,7 @@ import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFo
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import {runOnJS, useAnimatedRef} from 'react-native-reanimated';
+import {runOnJS, setNativeProps, useAnimatedRef} from 'react-native-reanimated';
 import type {Emoji} from '@assets/emojis/types';
 import type {FileObject} from '@components/AttachmentModal';
 import AttachmentModal from '@components/AttachmentModal';
@@ -23,7 +23,6 @@ import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
-import {forceClearInput} from '@libs/ComponentUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import {getDraftComment} from '@libs/DraftCommentUtils';
 import getModalState from '@libs/getModalState';
@@ -367,7 +366,7 @@ function ReportActionCompose({
         // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state
         runOnJS(setIsCommentEmpty)(true);
         runOnJS(resetFullComposerSize)();
-        forceClearInput(animatedRef);
+        setNativeProps(animatedRef, {text: ''}); // clears native text input on the UI thread
         runOnJS(submitForm)();
     }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]);