Merge pull request #59319 from linhvovan29546/fix/59040-mweb-attechment-picker-shown-twice

fix: mweb attachment picker shown twice

Author: rafecolton

src/components/AttachmentPicker/index.tsx

@@ -1,7 +1,7 @@
 import React, {useRef} from 'react';
 import type {ValueOf} from 'type-fest';
 import type {FileObject} from '@components/AttachmentModal';
-import * as Browser from '@libs/Browser';
+import {isMobileChrome} from '@libs/Browser';
 import Visibility from '@libs/Visibility';
 import CONST from '@src/CONST';
 import type AttachmentPickerProps from './types';
@@ -10,7 +10,7 @@ import type AttachmentPickerProps from './types';
  * Returns acceptable FileTypes based on ATTACHMENT_PICKER_TYPE
  */
 function getAcceptableFileTypes(type: string): string | undefined {
-    if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE || Browser.isMobileChrome()) {
+    if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE || isMobileChrome()) {
         return;
     }
 
@@ -47,14 +47,15 @@ function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE, a
     const fileInput = useRef<HTMLInputElement>(null);
     const onPicked = useRef<(files: FileObject[]) => void>(() => {});
     const onCanceled = useRef<() => void>(() => {});
-
+    const isPickingRef = useRef(false);
     return (
         <>
             <input
                 hidden
                 type="file"
                 ref={fileInput}
                 onChange={(e) => {
+                    isPickingRef.current = false;
                     if (!e.target.files) {
                         return;
                     }
@@ -82,6 +83,7 @@ function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE, a
                     fileInput.current.addEventListener(
                         'cancel',
                         () => {
+                            isPickingRef.current = false;
                             // For Android Chrome, the cancel event happens before the page is visible on physical devices,
                             // which makes it unreliable for us to show the keyboard, while on emulators it happens after the page is visible.
                             // So here we can delay calling the onCanceled.current function based on visibility in order to reliably show the keyboard.
@@ -103,6 +105,10 @@ function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE, a
             {/* eslint-disable-next-line react-compiler/react-compiler */}
             {children({
                 openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
+                    if (isPickingRef.current) {
+                        return;
+                    }
+                    isPickingRef.current = true;
                     onPicked.current = newOnPicked;
                     fileInput.current?.click();
                     onCanceled.current = newOnCanceled;