Disable SuggestionList during text composition

GetStream · Dec 6, 2023 · 474a51f · 474a51f
1 parent 409db05
commit 474a51f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 27 deletions.
diff --git a/src/components/AutoCompleteTextarea/Textarea.jsx b/src/components/AutoCompleteTextarea/Textarea.jsx
@@ -49,6 +49,7 @@ export class ReactTextareaAutocomplete extends React.Component {
       currentTrigger: null,
       data: null,
       dataLoading: false,
+      isComposing: false,
       left: null,
       selectionEnd: 0,
       selectionStart: 0,
@@ -664,37 +665,39 @@ export class ReactTextareaAutocomplete extends React.Component {
       SuggestionList = DefaultSuggestionList,
     } = this.props;
 
+    const { isComposing } = this.state;
+
     const triggerProps = this.getTriggerProps();
 
     if (
-      triggerProps.values &&
-      triggerProps.currentTrigger &&
-      !(disableMentions && triggerProps.currentTrigger === '@')
-    ) {
-      return (
-        <div
-          className={clsx(
-            'rta__autocomplete',
-            'str-chat__suggestion-list-container',
-            dropdownClassName,
-          )}
-          ref={this.setDropdownRef}
-          style={dropdownStyle}
-        >
-          <SuggestionList
-            className={clsx('str-chat__suggestion-list', listClassName)}
-            dropdownScroll={this._dropdownScroll}
-            itemClassName={clsx('str-chat__suggestion-list-item', itemClassName)}
-            itemStyle={itemStyle}
-            onSelect={this._onSelect}
-            SuggestionItem={SuggestionItem}
-            {...triggerProps}
-          />
-        </div>
-      );
-    }
+      isComposing ||
+      !triggerProps.values ||
+      !triggerProps.currentTrigger ||
+      (disableMentions && triggerProps.currentTrigger === '@')
+    )
+      return null;
 
-    return null;
+    return (
+      <div
+        className={clsx(
+          'rta__autocomplete',
+          'str-chat__suggestion-list-container',
+          dropdownClassName,
+        )}
+        ref={this.setDropdownRef}
+        style={dropdownStyle}
+      >
+        <SuggestionList
+          className={clsx('str-chat__suggestion-list', listClassName)}
+          dropdownScroll={this._dropdownScroll}
+          itemClassName={clsx('str-chat__suggestion-list-item', itemClassName)}
+          itemStyle={itemStyle}
+          onSelect={this._onSelect}
+          SuggestionItem={SuggestionItem}
+          {...triggerProps}
+        />
+      </div>
+    );
   }
 
   render() {
@@ -745,6 +748,8 @@ export class ReactTextareaAutocomplete extends React.Component {
             this._onClickAndBlurHandler(e);
             onClick?.(e);
           }}
+          onCompositionEnd={() => this.setState((pv) => ({ ...pv, isComposing: false }))}
+          onCompositionStart={() => this.setState((pv) => ({ ...pv, isComposing: true }))}
           onFocus={(e) => {
             this.props.onFocus?.(e);
             onFocus?.(e);

diff --git a/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js b/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js
@@ -218,6 +218,31 @@ describe('ChatAutoComplete', () => {
     expect(userText).toHaveLength(0);
   });
 
+  it('should disable popup list when the input is in "isComposing" state', async () => {
+    const { findAllByText, findByTestId, queryAllByText, typeText } = await renderComponent();
+
+    const messageInput = await findByTestId('message-input');
+
+    act(() => {
+      const cStartEvent = new Event('compositionstart', { bubbles: true });
+      messageInput.dispatchEvent(cStartEvent);
+    });
+
+    const userAutocompleteText = `@${user.name}`;
+    typeText(userAutocompleteText);
+
+    // eslint-disable-next-line jest-dom/prefer-in-document
+    expect(await queryAllByText(user.name)).toHaveLength(0);
+
+    act(() => {
+      const cEndEvent = new Event('compositionend', { bubbles: true });
+      messageInput.dispatchEvent(cEndEvent);
+    });
+
+    // eslint-disable-next-line jest-dom/prefer-in-document
+    expect(await findAllByText(user.name)).toHaveLength(2);
+  });
+
   it('should use the queryMembers API for mentions if a channel has many members', async () => {
     const users = Array(100).fill().map(generateUser);
     const members = users.map((u) => generateMember({ user: u }));