adds ability to disable mentions

Author: yetieaterxb1

src/components/AutoCompleteTextarea/Textarea.js

@@ -431,6 +431,7 @@ class ReactTextareaAutocomplete extends React.Component {
       'closeOnClickOutside',
       'containerClassName',
       'containerStyle',
+      'disableMentions',
       'dropdownClassName',
       'dropdownStyle',
       'grow',
@@ -623,6 +624,7 @@ class ReactTextareaAutocomplete extends React.Component {
       className,
       containerClassName,
       containerStyle,
+      disableMentions,
       dropdownClassName,
       dropdownStyle,
       itemClassName,
@@ -638,17 +640,13 @@ class ReactTextareaAutocomplete extends React.Component {
     const suggestionData = this._getSuggestions();
     const textToReplace = this._getTextToReplace();
 
-    let { maxRows } = this.props;
-    if (!this.props.grow) maxRows = 1;
-
-    return (
-      <div
-        className={`rta ${dataLoading === true ? 'rta--loading' : ''} ${
-          containerClassName || ''
-        }`}
-        style={containerStyle}
-      >
-        {(dataLoading || suggestionData) && currentTrigger && (
+    const SuggestionListDropDown = () => {
+      if (
+        (dataLoading || suggestionData) &&
+        currentTrigger &&
+        !(disableMentions && currentTrigger === '@')
+      ) {
+        return (
           <div
             className={`rta__autocomplete ${dropdownClassName || ''}`}
             ref={(ref) => {
@@ -671,7 +669,22 @@ class ReactTextareaAutocomplete extends React.Component {
               />
             )}
           </div>
-        )}
+        );
+      }
+      return null;
+    };
+
+    let { maxRows } = this.props;
+    if (!this.props.grow) maxRows = 1;
+
+    return (
+      <div
+        className={`rta ${dataLoading === true ? 'rta--loading' : ''} ${
+          containerClassName || ''
+        }`}
+        style={containerStyle}
+      >
+        <SuggestionListDropDown />
         <Textarea
           {...this._cleanUpProps()}
           className={`rta__textarea ${className || ''}`}
@@ -700,6 +713,7 @@ ReactTextareaAutocomplete.propTypes = {
   closeOnClickOutside: PropTypes.bool,
   containerClassName: PropTypes.string,
   containerStyle: PropTypes.object,
+  disableMentions: PropTypes.bool,
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
   itemClassName: PropTypes.string,

src/components/ChatAutoComplete/ChatAutoComplete.js

@@ -25,7 +25,10 @@ const emojiReplace = (word) => {
 
 /** @type {React.FC<import("types").ChatAutoCompleteProps>} */
 const ChatAutoComplete = (props) => {
+  const { commands, onSelectItem, triggers } = props;
+
   const { channel } = useContext(ChannelContext);
+
   const members = channel?.state?.members;
   const watchers = channel?.state?.watchers;
 
@@ -66,7 +69,6 @@ const ChatAutoComplete = (props) => {
     [channel?.queryMembers],
   );
 
-  const { commands, onSelectItem, triggers } = props;
   /**
    * dataProvider accepts `onReady` function, which will executed once the data is ready.
    * Another approach would have been to simply return the data from dataProvider and let the
@@ -187,9 +189,9 @@ const ChatAutoComplete = (props) => {
         },
       },
     [
-      members,
-      getMembersAndWatchers,
       commands,
+      getMembersAndWatchers,
+      members,
       onSelectItem,
       queryMembersdebounced,
       triggers,
@@ -227,6 +229,7 @@ const ChatAutoComplete = (props) => {
       value={props.value}
       grow={props.grow}
       disabled={props.disabled}
+      disableMentions={props.disableMentions}
       SuggestionList={props.SuggestionList}
       additionalTextareaProps={props.additionalTextareaProps}
     />
@@ -242,6 +245,8 @@ ChatAutoComplete.propTypes = {
   maxRows: PropTypes.number,
   /** Make the textarea disabled */
   disabled: PropTypes.bool,
+  /** Disable mentions */
+  disableMentions: PropTypes.bool,
   /** The value of the textarea */
   value: PropTypes.string,
   /** Function to run on pasting within the textarea */

src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js

@@ -110,13 +110,13 @@ describe('ChatAutoComplete', () => {
   it('should let you select users when you type @<username>', async () => {
     const onSelectItem = jest.fn();
     const userAutocompleteText = `@${user.name}`;
-    const { typeText, findByText } = await renderComponent({ onSelectItem });
+    const { typeText, getAllByText } = await renderComponent({ onSelectItem });
     typeText(userAutocompleteText);
-    const userText = await findByText(user.name);
+    const userText = await getAllByText(user.name);
 
-    expect(userText).toBeInTheDocument();
+    expect(userText).toHaveLength(2);
 
-    fireEvent.click(userText);
+    fireEvent.click(userText[1]);
 
     expect(onSelectItem).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -165,6 +165,19 @@ describe('ChatAutoComplete', () => {
     expect(textarea.value).toContain('/giphy');
   });
 
+  it('should disable mention popup list', async () => {
+    const onSelectItem = jest.fn();
+    const userAutocompleteText = `@${user.name}`;
+    const { typeText, queryAllByText } = await renderComponent({
+      onSelectItem,
+      disableMentions: true,
+    });
+    typeText(userAutocompleteText);
+    const userText = await queryAllByText(user.name);
+
+    expect(userText).toHaveLength(0);
+  });
+
   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 }));

src/components/MessageInput/MessageInput.js

@@ -9,6 +9,7 @@ const MessageInput = (props) => {
 MessageInput.defaultProps = {
   focus: false,
   disabled: false,
+  disableMentions: false,
   publishTypingEvent: true,
   grow: true,
   maxRows: 10,

src/components/MessageInput/MessageInputFlat.js

@@ -64,6 +64,7 @@ const MessageInputFlat = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />

src/components/MessageInput/MessageInputLarge.js

@@ -91,6 +91,7 @@ const MessageInputLarge = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />

src/components/MessageInput/MessageInputSimple.js

@@ -43,6 +43,7 @@ const MessageInputSimple = (props) => {
             triggers={props.autocompleteTriggers}
             grow={props.grow}
             disabled={props.disabled}
+            disableMentions={props.disableMentions}
             SuggestionList={props.SuggestionList}
             additionalTextareaProps={props.additionalTextareaProps}
           />

src/components/MessageInput/MessageInputSmall.js

@@ -65,6 +65,7 @@ const MessageInputSmall = (props) => {
               triggers={props.autocompleteTriggers}
               grow={props.grow}
               disabled={props.disabled}
+              disableMentions={props.disableMentions}
               SuggestionList={props.SuggestionList}
               additionalTextareaProps={props.additionalTextareaProps}
             />

types/index.d.ts

@@ -655,6 +655,8 @@ export interface MessageInputProps {
   /** Disable input */
   disabled?: boolean;
   /** enable/disable firing the typing event */
+  disableMentions?: boolean;
+  /** enable/disable firing the typing event */
   publishTypingEvent?: boolean;
   /** Grow the textarea while you're typing */
   grow?: boolean;
@@ -1098,6 +1100,7 @@ export interface ChatAutoCompleteProps {
   grow?: boolean;
   maxRows?: number;
   disabled?: boolean;
+  disableMentions?: boolean;
   value?: string;
   handleSubmit?(event: React.FormEvent): void;
   onChange?(event: React.ChangeEventHandler): void;