Semantic-Org/Semantic-UI-React

Dropdown: Selecting item with Enter in search Dropdown prevents focusing other refs

Open

#3504 opened on Mar 14, 2019

View on GitHub
 (2 comments) (2 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import
bughelp wantedstale

Description

Bug Report

Steps

  • Create a Dropdown with search enabled and selectOnNavigation={false}
  • Create an input with a ref
  • In the Dropdown's onChange handler, focus the input ref

This issue is only triggered when selecting an item using the Enter key. It does not occur when clicking the item, when selecting an item via onBlur, and it doesn't occur when not using a search dropdown.

I believe it is tied to this line: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L585

Here is a code sandbox replicating the issue: https://codesandbox.io/s/k5p18q3l27

(Note: Selecting an item with Enter will cause a loop and freeze that browser tab, you'll need to end the process manually from the task manager)

Expected Result

The dropdown selects the item, closes, and the next input is automatically focused.

expected_result

Actual Result

When selecting an item with Enter it causes an endless loop of

Dropdown.onChange
inputRef.current.focus()
Dropdown.onBlur
Dropdown.onChange
Dropdown.onClose
inputRef.current.focus()
Dropdown.onBlur
Dropdown.onChange
Dropdown.onClose
inputRef.current.focus()
// repeat forever

Selecting an item with Enter should behave the same as other selection methods, and should not try to re-focus the search input after it has been closed.

Version

0.84.0

Testcase

https://codesandbox.io/s/k5p18q3l27

Contributor guide

Tech stack
reactjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
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.
clear
Prerequisites
React basicsunderstanding of refs
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The bug occurs when selecting an item with Enter in a search Dropdown with `selectOnNavigation={false}`. The suspect code is in `Dropdown.js` at line 585, likely related to re focusing the search input after close. The issue provides a code sandbox reproducing the infinite loop. Investigate the difference in focus handling between Enter and click selection, and ensure the search input is not re focused after the dropdown closes.