Observador de Clique (ClickAwayListener)

Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.

📦 1.5 kB gzipped.
⚛️ Suporte para portais

A paleta com funções de estilo.

Exemplo

Por exemplo, se você precisar ocultar um menu quando as pessoas clicarem em qualquer outro lugar da sua página:

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

Observe que o componente aceita apenas um elemento filho. Você pode encontrar demonstrações avançadas na seção documentação de menu.

Portal

A demonstração a seguir usa Portal para renderizar o menu suspenso em uma nova "subárvore" fora da hierarquia atual do DOM.

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <Box sx={styles}>
          Click me, I will stay visible until you click outside.
        </Box>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

Eventos

Por padrão, o componente responde aos eventos de clique e de toque final (click + touch end). No entanto, você pode configurá-lo para responder aos eventos de mouse pressionado e toque inicial (mouse down + touch start).

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

⚠️ Neste modo, apenas as interações na barra de rolagem do documento são ignoradas.

API

<ClickAwayListener />