La referencia de entrada del archivo se activa dos veces cuando hago clic en el botón varias veces muy rápidamente:
<input type="file" ref={uploadRef} ... /> <DefaultButton onClick={onClick} ... />y,
const onClick = React.useCallback( (e) => { uploadRef.current?.click(); // e.stopPropagation(); } }, [] Información relacionada: probé e.stopPropagation() mencionado aquí: https://github.com/reactjs/react-modal/issues/494 . esto no funciona
El botón al hacer clic varias veces "rápidamente" carga dos selectores de archivos en secuencia. Si cierro primero, inmediatamente veo el siguiente y la última selección persiste.
Puede intentar tener un tiempo de timeout para ese evento de clic
let timer //initialise timer somewhere const onClick = React.useCallback( () => { //remove the previous timer, once an user clicks again timer && clearTimeout(timer) timer = setTimeout(() => { uploadRef.current?.click(); }, 200) // this is an idle time before opening file picker, it works for me, you can modify it as you wish }, [timer])