Pular para o conteúdo
Ajude a traduzir esta página

Capturar foco

Capturar foco dentro de um nó DOM.

TrapFocus é um componente que gerencia o foco para seus descendentes. This is useful when implementing overlays such as modal dialogs, which should not allow the focus to escape while open.

When open={true} the trap is enabled, and pressing Tab or Shift+Tab will rotate focus within the inner focusable elements of the component.

A paleta com funções de estilo.

⚠️ O componente é experimental e instável.

Exemplo

<button type="button" onClick={() => setOpen(true)}>
  Open
</button>
{open && (
  <TrapFocus open>
    <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
      <label>
        First name: <input type="text" />
      </label>
      <br />
      <button type="button" onClick={() => setOpen(false)}>
        Close
      </button>
    </Box>
  </TrapFocus>
)}

Desabilitar o forçar foco

Cliques dentro do capturar foco se comportam normalmente; mas cliques fora do capturar foco estão bloqueados.

Você pode desativar esse comportamento com a propriedade disableEnforceFocus.

<button type="button" onClick={() => setOpen(true)}>
  Open
</button>
{open && (
  <TrapFocus disableEnforceFocus open>
    <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
      <label>
        First name: <input type="text" />
      </label>
      <br />
      <button type="button" onClick={() => setOpen(false)}>
        Close
      </button>
    </Box>
  </TrapFocus>
)}

Ativação tardia

Por padrão, o componente move o foco para seus descendentes assim que abre: open={true}.

Você pode desabilitar esse comportamento e deixá-lo de forma tardia com a propriedade disableAutoFocus. Quando o foco automático é desabilitado, como na demonstração abaixo, o componente só captura o foco quando ele for focado.

<button type="button" onClick={() => setOpen(true)}>
  Open
</button>
{open && (
  <TrapFocus open disableAutoFocus>
    <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
      <label>
        First name: <input type="text" />
      </label>
      <br />
      <button type="button" onClick={() => setOpen(false)}>
        Close
      </button>
    </Box>
  </TrapFocus>
)}

Portal

A demonstração a seguir usa o componente Portalpara renderizar um subconjunto de elementos filhos de captura de foco em uma nova "sub-árvore" fora da atual hierarquia do DOM, para que eles não façam mais parte do ciclo de foco.

API