Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

239
Visualizações
Cerrar un MUI popper usando ClickAwayListener afecta todo lo que hay dentro

Soy un nuevo desarrollador de reacción, aquí tengo un pequeño problema, mi ClickAwayListener debería cerrar Popper al hacer clic en 'x' o afuera, lo cual hace, pero el problema es que tengo un componente dentro de mi Paper y que tiene Select cuando hago clic en ese seleccionar para ver mi las opciones, luego las opciones aparecen y desaparecen rápidamente, lo he probado y ClickAwayListener también afecta esto, ¿cómo deshabilitar el efecto de ClickAwayListener para aquellos dentro de Paper ?

 import ClickAwayListener from "@material-ui/core/ClickAwayListener"; const renderSettingsPopper = () => { return ( <Popper id={"graph"} open={popupOpenState()} placement="left-start" anchorEl={anchorEl} className={props.classes.components} style={{ zIndex: 4 }} modifiers={{ flip: { enabled: true, }, preventOverflow: { enabled: true, boundariesElement: "viewport", }, }} > <ClickAwayListener onClickAway={closeSettingsPopup}> <Paper className={props.classes.components}> {renderSettingsForm()} </Paper> </ClickAwayListener> </Popper> ); };
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Este problema es más difícil de lo que esperaba, pero finalmente encontré una solución. Debe realizar un seguimiento del estado Select abierto dentro del Popover .

 <Select label="Age" defaultValue={10} onOpen={() => setSelectOpen(true)} MenuProps={{ TransitionProps: { onExited: () => setSelectOpen(false), }, }} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select>

Y deshabilite el controlador de cierre cuando uno de los Select esté abierto actualmente:

 <ClickAwayListener onClickAway={() => { if (selectOpen) return; handleClose(); }} >

Demostración de Codesandbox

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda