diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js --- a/native/chat/chat-input-bar.react.js +++ b/native/chat/chat-input-bar.react.js @@ -337,13 +337,16 @@ +expandButtons: () => void, +hideButtons: () => void, +immediatelyHideButtons: () => void, + +textInputRef: { current: ?React.ElementRef }, + +clearableTextInputRef: { current: ?ClearableTextInput }, + +selectableTextInputRef: { + current: ?React.ElementRef, + }, + +setTextInputRef: (ref: ?React.ElementRef) => void, + +setClearableTextInputRef: (ref: ?ClearableTextInput) => void, }; class ChatInputBar extends React.PureComponent { - textInput: ?React.ElementRef; - clearableTextInput: ?ClearableTextInput; - selectableTextInput: ?React.ElementRef; - clearBeforeRemoveListener: () => void; clearFocusListener: () => void; clearBlurListener: () => void; @@ -481,7 +484,7 @@ if (Platform.OS !== 'ios') { return; } - const { textInput } = this; + const textInput = this.props.textInputRef.current; if (!textInput) { return; } @@ -590,7 +593,7 @@ const keyboardInputHost = Platform.OS === 'android' ? null : ( - + ); let editedMessage; @@ -709,9 +712,9 @@ placeholderTextColor={this.props.colors.listInputButton} multiline={true} style={this.props.styles.textInput} - textInputRef={this.textInputRef} - clearableTextInputRef={this.clearableTextInputRef} - ref={this.selectableTextInputRef} + textInputRef={this.props.setTextInputRef} + clearableTextInputRef={this.props.setClearableTextInputRef} + ref={this.props.selectableTextInputRef} selectionColor={`#${this.props.threadInfo.color}`} /> @@ -734,20 +737,6 @@ ); } - textInputRef = (textInput: ?React.ElementRef) => { - this.textInput = textInput; - }; - - clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => { - this.clearableTextInput = clearableTextInput; - }; - - selectableTextInputRef = ( - selectableTextInput: ?React.ElementRef, - ) => { - this.selectableTextInput = selectableTextInput; - }; - updateText = (text: string) => { if (this.props.isExitingDuringEditModeRef.current) { return; @@ -774,7 +763,10 @@ }, 400); focusAndUpdateTextAndSelection = (text: string, selection: Selection) => { - this.selectableTextInput?.prepareForSelectionMutation(text, selection); + this.props.selectableTextInputRef.current?.prepareForSelectionMutation( + text, + selection, + ); this.props.setText(text); this.props.setTextEdited(true); this.props.setSelectionState({ text, selection }); @@ -797,7 +789,8 @@ }; focusAndUpdateButtonsVisibility = () => { - const { textInput } = this; + const textInput = this.props.textInputRef.current; + if (!textInput) { return; } @@ -820,7 +813,7 @@ this.props.updateSendButton(''); - const { clearableTextInput } = this; + const clearableTextInput = this.props.clearableTextInputRef.current; invariant( clearableTextInput, 'clearableTextInput should be sent in onSend', @@ -1386,6 +1379,23 @@ setButtonsExpanded(false); }, [expandoButtonsOpen, targetExpandoButtonsOpen]); + const textInputRef = React.useRef>(); + const clearableTextInputRef = React.useRef(); + const selectableTextInputRef = + React.useRef>(); + const setTextInputRef = React.useCallback( + (ref: ?React.ElementRef) => { + textInputRef.current = ref; + }, + [], + ); + const setClearableTextInputRef = React.useCallback( + (ref: ?ClearableTextInput) => { + clearableTextInputRef.current = ref; + }, + [], + ); + return ( ); }