palantir/blueprint

[Select] Focus issue when changing from one select to another directly

Open

#5,129 opened on Feb 11, 2022

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: selectType: bughelp wanted

Description

Environment

  • Package version(s):
    @blueprintjs/core 3.53.0 @blueprintjs/select 3.18.12
  • Operating System: MacOS Monterey 12.1
  • Browser name and version: Google Chrome 98.0.4758.80

Code Sandbox

Sandbox

Steps to reproduce

  1. Create 2 Select from @blueprintjs/select with button as target child
  2. Select a first Select
  3. Click on the second target button directly (don't click outside first then on button this behavious is ok, it happens only when you directly click on a target)
  4. Play with arrow to change active Item

Actual behavior

https://user-images.githubusercontent.com/9548473/153581747-8394dc16-d10a-4c3d-9ca0-f20e13711539.mov

Expected behavior

Correctly focus the second target button.

Contributor guide

Tech stack
typescriptreact
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React basicsBlueprint component knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the Select component's focus management in the Blueprint repository. Look at the Overlay and Popover components to understand how focus is handled when a Select closes. The issue occurs when directly clicking from one Select to another, causing focus to not transfer to the second target. Check the relevant source files in packages/select/src/ and packages/core/src/components/overlay/ for focus trap or auto focus logic. The sandbox provided can help reproduce the issue.