palantir/blueprint

Select does not allow direct selection of last item in scrollable menu

Open

#6655 aperta il 16 gen 2024

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)TypeScript (2167 fork)batch import
Package: selectStatus: needs proposalType: bughelp wanted

Metriche repository

Star
 (20.263 star)
Metriche merge PR
 (Merge medio 24g 18h) (17 PR mergiate in 30 g)

Descrizione

Environment

  • Package version(s): 5.7.2
  • Operating System: MacOS 13.6.3
  • Browser name and version: Chrome 120.0.6099.216

Repo

Repro exists in Blueprint doc's Select component example.

https://github.com/palantir/blueprint/assets/2968519/7eb86ea7-0cec-49fd-8150-a2f440de667d

Steps to reproduce

  1. Have a <Select> component with the default configuration (as exemplified in the docs) and with more than 10 items (such that the dropdown menu overflows)
  2. Attempt to click either the first or last item while already scrolled into the dropdown menu.
  3. Note that the first click does not register as a selection

Actual behavior

In the <Select> component, the first click on the first or last item in a scrolled menu does not register as a click/selection in the component, rather it is treated as a scroll. Clicks in the middle of the menu do not have this issue / operate as expected.

Expected behavior

This behavior is confusing, especially since the menu item still receives selection styles in the list (blue/primary highlight) but is not actually selected by the Select.

https://github.com/palantir/blueprint/assets/2968519/d6a4f8ea-1230-4b55-af54-6b5cb1718ebe

Possible solution

Guida contributor

Direzione di ricerca
Analizza l'implementazione del componente Select nella codebase di Blueprint, concentrandoti sulla gestione degli eventi di scorrimento nel popover/overlay. Controlla la logica di delega degli eventi che potrebbe impedire che i clic sul primo o sull'ultimo elemento vengano registrati come selezioni. Esamina il codice sorgente del componente Select e delle utility correlate come Popover, e verifica come i clic sugli elementi vengono gestiti nel contesto di una lista scorrevole.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
Basic React knowledgeFamiliarity with Blueprint Select component
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
75