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

192
Visualizações
Ability to enter tab characters in a TextField?

I have a MUI TextField that is defined as multi-line. My goal is to enter JSON text. I found that when I pressed the tab key, my component lost focus and focus was given to the next component on screen. What I desire is to have the tab value (\t) entered into the string text. Is there a recipe to disable the tab key as a navigation tool?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

By default, if you press Tab in the input field, the browser will switch focus to the next element. To override that behavior, you can listen to the keydown event and call e.preventDefault(), then add some code to insert the tab character at the cursor position. Below is the implementation. Note that because you are tampering with the input value, the undo feature doesn't work anymore:

<TextField
  multiline
  onKeyDown={(e) => {
    const { value } = e.target;

    if (e.key === 'Tab') {
      e.preventDefault();

      const cursorPosition = e.target.selectionStart;
      const cursorEndPosition = e.target.selectionEnd;
      const tab = '\t';

      e.target.value =
        value.substring(0, cursorPosition) +
        tab +
        value.substring(cursorEndPosition);

      // if you modify the value programmatically, the cursor is moved
      // to the end of the value, we need to reset it to the correct
      // position again
      e.target.selectionStart = cursorPosition + 1;
      e.target.selectionEnd = cursorPosition + 1;
    }
  }}
/>

Live Demo

Codesandbox Demo

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