fix: add optional toggling between keyboard and picker

package/src/components/Channel/Channel.tsx

@@ -218,6 +218,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'compressImageQuality'
       | 'createPollOptionGap'
       | 'doFileUploadRequest'
+      | 'focusInputOnPickerClose'
       | 'handleAttachButtonPress'
       | 'hasCameraPicker'
       | 'hasCommands'
@@ -423,6 +424,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     enableSwipeToReply = true,
     enforceUniqueReaction = false,
     FlatList = NativeHandlers.FlatList,
+    focusInputOnPickerClose = true,
     forceAlignMessages,
     getMessageGroupStyle,
     handleAttachButtonPress,
@@ -1651,6 +1653,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     createPollOptionGap,
     doFileUploadRequest,
     editMessage,
+    focusInputOnPickerClose,
     handleAttachButtonPress,
     hasCameraPicker,
     hasCommands: hasCommands ?? !!clientChannelConfig?.commands?.length,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -17,6 +17,7 @@ export const useCreateInputMessageInputContext = ({
   createPollOptionGap,
   doFileUploadRequest,
   editMessage,
+  focusInputOnPickerClose,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
@@ -49,6 +50,7 @@ export const useCreateInputMessageInputContext = ({
       createPollOptionGap,
       doFileUploadRequest,
       editMessage,
+      focusInputOnPickerClose,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,

package/src/components/MessageInput/__tests__/AttachButton.test.tsx

@@ -180,4 +180,35 @@ describe('AttachButton', () => {
       expect(queryByTestId('attachment-picker-list')).toBeTruthy();
     });
   });
+
+  it('should close the attachment picker on second press when focusInputOnPickerClose is false', async () => {
+    jest.spyOn(NativeHandler, 'isImageMediaLibraryAvailable').mockImplementation(() => true);
+
+    const channelProps = { channel, focusInputOnPickerClose: false };
+    const props = {};
+
+    renderComponent({ channelProps, client, props });
+
+    const { queryByTestId } = screen;
+
+    await waitFor(() => {
+      expect(queryByTestId('attach-button')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent.press(screen.getByTestId('attach-button'));
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('attachment-picker-list')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent.press(screen.getByTestId('attach-button'));
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('attachment-picker-list')).toBeNull();
+    });
+  });
 });

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -92,13 +92,23 @@ export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
  */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
-  const { inputBoxRef, handleAttachButtonPress, openAttachmentPicker } = useMessageInputContext();
+  const {
+    closeAttachmentPicker,
+    focusInputOnPickerClose,
+    handleAttachButtonPress,
+    inputBoxRef,
+    openAttachmentPicker,
+  } = useMessageInputContext();
   const { attachmentPickerStore } = useAttachmentPickerContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const toggleAttachmentPicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
-      inputBoxRef.current?.focus();
+      if (focusInputOnPickerClose) {
+        inputBoxRef.current?.focus();
+      } else {
+        closeAttachmentPicker();
+      }
     } else {
       openAttachmentPicker();
     }

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -128,6 +128,15 @@ export type InputMessageInputContextValue = {
     options?: UpdateMessageOptions;
   }) => ReturnType<StreamChat['updateMessage']>;
 
+  /**
+   * Controls what happens when the attach button is pressed while the attachment picker is open.
+   * When true (default), the message input is focused, toggling from the picker to the keyboard.
+   * When false, the attachment picker is closed without focusing the input.
+   * @type boolean
+   * @default true
+   */
+  focusInputOnPickerClose: boolean;
+
   /** When false, CameraSelectorIcon will be hidden */
   hasCameraPicker: boolean;
 

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -18,6 +18,7 @@ export const useCreateMessageInputContext = ({
   compressImageQuality,
   createPollOptionGap,
   editMessage,
+  focusInputOnPickerClose,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
@@ -61,6 +62,7 @@ export const useCreateMessageInputContext = ({
       compressImageQuality,
       createPollOptionGap,
       editMessage,
+      focusInputOnPickerClose,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,