Permite gerenciar o select usando o teclado

[ezequias21]

Por favor, verifique se o seu pull request está de acordo com o checklist abaixo:

• A implementação feita possui testes (Caso haja um motivo para não haver testes/haver apenas testes de snapshot, descrever abaixo)
• A documentação no mdx foi feita ou atualizada, caso necessário
• O eslint passou localmente

1 - Resumo

• Implementa o gerenciamento do select por teclado

2 - Tipo de pull request

• 🧱 Novo componente
• [ x] ✨ Nova feature ou melhoria
• 🐛 Fix
• 👨‍💻 Refatoração
• 📝 Documentação
• 🎨 Estilo
• 🤖 Build ou CI/CD

3 - Esse PR fecha alguma issue? Favor referenciá-la

4 - Quais são os passos para avaliar o pull request?

• Utilize o teclado para selecionar as opções do campo de seleção (select), preferencialmente;
• Teste com todas as props ativadas e desativadas;
• Veja que agora é possível gerenciar o campo de seleção apenas com as teclas, semelhante ao comportamento do campo de seleção do HTML;
  • É possível selecionar as opções através das setas direcionais do teclado;
  • Ao teclar Enter quando o campo de seleção estiver em focus, as opções são abertas
  • Quando a opção searchable estiver ativa, pressionar qualquer tecla, filtra as opções. E se a prop estiver ativa, pressionar Enter adiciona o texto como nova opção (semelhante ao que já acontecia)

5 - Imagem ou exemplo de uso:

6 - Esse pull request adiciona breaking changes?

• Sim
• Não

[greptile-apps]

Greptile Summary

Este PR refatora a navegação por teclado do componente Select, substituindo a manipulação direta do DOM (classList.add/remove) por uma abordagem reativa baseada em currentPos e classes CSS dinâmicas. Também adiciona suporte às teclas Escape, ArrowDown/Up com dropdown fechado e uma marcação visual (option__text--selected) para o item atualmente selecionado.

Confidence Score: 4/5

O PR pode ser mesclado com atenção aos pontos levantados; nenhum problema crítico foi encontrado.

Todas as ocorrências são P2: a questão do mouseout zerando currentPos é um regresso de UX mas não quebra a seleção, a mudança no encaminhamento do evento keydown pode afetar consumidores mas é contornável, e a similaridade de cores entre highlight e selected é estética.

src/components/Select.vue — especificamente o handler @mouseout, o switch em handleKeydown e os estilos .highlight/.option__text--selected.

Important Files Changed

Filename

Overview

src/components/Select.vue

Refatora toda a navegação por teclado do Select para uma abordagem reativa (via currentPos e classes CSS) em vez de manipulação direta do DOM; adiciona suporte a Escape, ArrowDown/Up com dropdown fechado e marcação visual do item selecionado. Pequenos problemas: mouseout zera currentPos apagando posição do teclado, teclas tratadas não são mais encaminhadas via emitKeydown, e highlight/selected compartilham a mesma cor de fundo.

_{Reviews (1): Last reviewed commit: "Permite gerenciar o select usando o tecl..." | Re-trigger Greptile}

[jvictordev1]

Com as props searchable e addable ativas, ao escrever o nome para uma nova opção e apertar ESC, sem adicionar, o select fica com estado aberto com nenhuma opção encontrada.

Gravacao.de.tela.de.2026-04-30.14-44-22.webm

[jvictordev1]

Na imagem a opção Game Of Thrones ta selecionada e eu to dando foco na opção The Umbrella Academy com o mouse. As duas tão ficando com a mesma cor de fundo, dando a sensação de "duas opções selecionadas".

[jvictordev1]

Com as props searchable e addable ativas, ao escrever o nome para uma nova opção e apertar ESC, sem adicionar, o select fica com estado aberto com nenhuma opção encontrada.
Gravacao.de.tela.de.2026-04-30.14-44-22.webm

A mesma coisa ta acontecendo só com a prop searchable ativada. Quando pesquiso por uma opção existente e aperto ESC, o select fica aberto indicando nenhuma opção encontrada.

[jvictordev1]

Com a prop searchable ativa: Ao selecionar uma opção, depois abrir o select novamente, pesquisar por uma opção que não existe e pressionar ENTER a opção selecionada anteriormente aparece no select.

Gravacao.de.tela.de.2026-04-30.14-53-12.webm