La funcionalidad requerida para modal es que cuando se hace clic en el botón 'Más', debe estar visible y cuando se hace clic en el botón Más o en cualquier otra parte de la pantalla (excluyendo el modal en sí), el modal debe cerrarse. He intentado varias formas a partir dehttps://usehooks-typescript.com/react-hook/use-on-click-outside y ClickAwayListener de MUI.
<ClickAwayListener onClickAway={handleClickAway} > <div style={{ position: 'relative' }}> <button onClick={(e: any) => { e.stopPropagation(); setModalVisible(!modalVisible); }} > More </button> <Modal visible={modalVisible} id="btn-container" > {dummy.map((str: string) => { return <span>{str}</span>; })} </Modal> </div> </ClickAwayListener> const handleClickAway = (e: any) => { if (e.target.localName === 'body') { e.preventDefault(); return; } setModalVisible(false); }; const Modal = styled.div` position: absolute; top: 30px; left: -200px; background: #fff; padding: 25px; z-index: 8; visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')}; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); width: 250px; max-height: 320px; overflow-y: auto; `; Básicamente, ClickAwayListener no puede detectar su componente secundario y está cerrando el modal incluso cuando hago clic dentro del modal, que no debería ser la funcionalidad.
El componente 'modal' utilizado aquí no es un componente materialui, es un componente con estilo que construí yo mismo
onBackdropClick en Modal en lugar de onClickAway , onBackdropClick se dispara cuando hace clic fuera de Modal <Modal onBackdropClick={() => setOpen(false)}onClose en Modal en lugar de onBackdropClick , onClose se dispara cuando el Modal quiere cerrarse solo <Modal onClose={(_, reason) => reason === 'backdropClick' && setOpen(false)}Dialog en lugar de Modal . Dialog es el componente que contiene el Modal con buenos estilos predeterminados listos para usar, mientras que Modal es su primo feo que se usa para la personalización de bajo nivel. <Dialog onClose={(_, reason) => reason === 'backdropClick' && setOpen(false)}