feat: add prop disabled to ChatAutoComplete props (#2617)

Author: MartinCupela

src/components/ChatAutoComplete/ChatAutoComplete.tsx

@@ -96,6 +96,8 @@ export type SuggestionListProps<
 >;
 
 export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
+  /** Override the default disabled state of the underlying `textarea` component. */
+  disabled?: boolean;
   /** Function to override the default submit handler on the underlying `textarea` component */
   handleSubmit?: (event: React.BaseSyntheticEvent) => void;
   /** Function to run on blur of the underlying `textarea` component */
@@ -167,7 +169,7 @@ const UnMemoizedChatAutoComplete = <
       closeCommandsList={messageInput.closeCommandsList}
       closeMentionsList={messageInput.closeMentionsList}
       containerClassName='str-chat__textarea str-chat__message-textarea-react-host'
-      disabled={disabled || !!cooldownRemaining}
+      disabled={(props.disabled ?? disabled) || !!cooldownRemaining}
       disableMentions={messageInput.disableMentions}
       grow={messageInput.grow}
       handleSubmit={props.handleSubmit || messageInput.handleSubmit}

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

@@ -52,7 +52,7 @@ const renderComponent = async (
   messageInputContextOverrides = {},
   activeChannel = channel,
 ) => {
-  const placeholderText = props.placeholder || 'placeholder';
+  const placeholderText = props.placeholder === null ? null : props.placeholder || 'placeholder';
 
   const OverrideMessageInputContext = ({ children }) => {
     const currentContext = useMessageInputContext();
@@ -70,24 +70,32 @@ const renderComponent = async (
       <ChatAutoComplete {...props} placeholder={placeholderText} />
     </OverrideMessageInputContext>
   );
+  let renderResult;
+  await act(() => {
+    renderResult = render(
+      <Chat client={chatClient}>
+        <ActiveChannelSetter activeChannel={activeChannel} />
+        <Channel>
+          <MessageInput emojiSearchIndex={searchIndexMock} Input={AutoComplete} />
+        </Channel>
+      </Chat>,
+    );
+  });
 
-  const renderResult = render(
-    <Chat client={chatClient}>
-      <ActiveChannelSetter activeChannel={activeChannel} />
-      <Channel>
-        <MessageInput emojiSearchIndex={searchIndexMock} Input={AutoComplete} />
-      </Channel>
-    </Chat>,
-  );
-  const textarea = await waitFor(() => renderResult.getByPlaceholderText(placeholderText));
-  const typeText = (text) => {
-    fireEvent.change(textarea, {
-      target: {
-        selectionEnd: text.length,
-        value: text,
-      },
-    });
-  };
+  let textarea;
+  let typeText;
+  if (placeholderText !== null) {
+    textarea = await waitFor(() => renderResult.getByPlaceholderText(placeholderText));
+
+    typeText = (text) => {
+      fireEvent.change(textarea, {
+        target: {
+          selectionEnd: text.length,
+          value: text,
+        },
+      });
+    };
+  }
   return { ...renderResult, textarea, typeText };
 };
 
@@ -132,6 +140,20 @@ describe('ChatAutoComplete', () => {
     expect(textarea).toBeDisabled();
   });
 
+  it('should give preference to prop disabled over the MessageInputContext value', async () => {
+    const { textarea } = await renderComponent({ disabled: false }, { disabled: true });
+
+    expect(textarea).toBeEnabled();
+  });
+
+  it('should give preference to cooldown value over the prop disabled', async () => {
+    await renderComponent({ disabled: false, placeholder: null }, { cooldownRemaining: 10 });
+    expect(screen.queryByPlaceholderText('Placeholder')).not.toBeInTheDocument();
+    const textarea = screen.getByTestId('message-input');
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveProperty('placeholder', 'Slow Mode ON');
+  });
+
   it('should let you select emojis when you type :<emoji>', async () => {
     const emojiAutocompleteText = ':smile';
     const { findByText, textarea, typeText } = await renderComponent();