Skip to content

Detector de Clic Fuera

El componente Click-Away Listener detecta cuando se produce un evento de clic fuera de su elemento hijo.

Introducción

El detector de Clic fuera (Click-Away Listener) es un componente de utilidad que escucha eventos de clic fuera de su hijo. (Tenga en cuenta que sólo acepta un elemento hijo).

Esto es útil para componentes como Popper que debe cerrarse cuando el usuario hace clic en cualquier otra parte del documento.

Click-Away Listener también soporta el componente Portal.

Componente

import ClickAwayListener from '@u_ui/u-ui/ClickAwayListener';

La siguiente demostración muestra cómo ocultar un menú desplegable cuando los usuarios hacen click en cualquier otro lugar de la página:

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <Button type="button" onClick={handleClick}>
      Abrir menú desplegable
    </Button>
    {open ? (
      <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <Button type="button" onClick={handleClick}>
      Abrir menú desplegable
    </Button>
    {open ? (
      <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

Press Enter to start editing

Uso con Portal

La siguiente demo utiliza el componente Portal para renderizar el desplegable en un nuevo subárbol fuera de la jerarquía DOM actual:

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <Button type="button" onClick={handleClick}>
      Abrir menú desplegable
    </Button>
    {open ? (
      <Portal>
        <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
        </Box>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <Button type="button" onClick={handleClick}>
      Abrir menú desplegable
    </Button>
    {open ? (
      <Portal>
        <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
        </Box>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

Press Enter to start editing

Personalización

Escucha de eventos iniciales

Por defecto, el componente Click-Away Listener responde a eventos finales - el fin de un clic o toque.

Puede configurar el componente para que escuche eventos principales (el inicio de un clic o toque) utilizando las propiedades mouseEvent y touchEvent, como se muestra en la siguiente demo:

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <Button type="button" onClick={handleClick}>
      Open menu dropdown
    </Button>
    {open ? (
      <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <Button type="button" onClick={handleClick}>
      Open menu dropdown
    </Button>
    {open ? (
      <Box sx={styles}>
        Haz clic en mí, permaneceré visible hasta que hagas clic fuera.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

Press Enter to start editing

Accesibilidad

Por defecto, Click-Away Listener añadirá un manejador onClick a su hijo. Esto puede provocar que los lectores de pantalla anuncien que se puede hacer clic en el elemento hijo, aunque este manejador onClick no tenga ningún efecto sobre el propio elemento hijo.

Para evitar este comportamiento, añada role="presentation" al elemento hijo:

<ClickAwayListener>
  <div role="presentation">
    <h1>encabezamiento no interactivo</h1>
  </div>
</ClickAwayListener>

Esto también es necesario para solucionar un problema conocido en NVDA cuando se utiliza Firefox que impide el anuncio de mensajes de alerta—véase mui/material-ui#29080 para más detalles.

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<ClickAwayListener />