Semantic-Org/Semantic-UI-React

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

开放

#3,504 创建于 2019年3月14日

 (2 条评论) (2 个反应) (0 位负责人)JavaScript (4,065 个派生)batch import
bughelp wantedstale

仓库指标

星标
 (13,136 个星标)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南