palantir/blueprint

MultiSelect triggers wrapping form

Open

#4.461 aberto em 17 de dez. de 2020

Ver no GitHub
 (2 comments) (5 reactions) (0 assignees)TypeScript (2.167 forks)batch import
Form componentsP2Package: corehelp wanted

Métricas do repositório

Stars
 (20.263 stars)
Métricas de merge de PR
 (Mesclagem média 43d 10h) (27 fundiu PRs em 30d)

Description

Environment

  • Package version(s): select 3.15.0
  • Operating System: Docker / node 14
  • Browser name and version: Chrome latest

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-forked-cnc83?file=/src/index.tsx

Steps to reproduce

  1. Create a MultiSelect
  2. Place it inside a form
  3. Select a value, confirm with enter

Actual behavior

The form is submitted.

Expected behavior

The value is added to the tag list and the form remains un-submitted.

Possible solution

Doing event.stopPropagation and event.preventDefault in the onItemSelect handler does not help. Same with overriding tagInputProps.onChange.

Guia do colaborador

Direção de pesquisa
Investigue o tratamento de eventos do componente MultiSelect para a tecla Enter. Concentre se em como o componente lida com eventos keyDown, especialmente na entrada de tags. Verifique se há falta de event.preventDefault() no manipulador apropriado, ou se o envio do formulário é acionado pelo comportamento padrão do formulário pai na tecla Enter. Examine o código fonte do componente para os manipuladores onKeyDown e onKeyUp.
Pilha de tecnologia
javascripttypescriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
GitReactTypeScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65