UI5 / UI5/webcomponents

[ComboBox]: Auto-Selection triggers with noTypeahead

Open
#12,727 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request TOPIC RL
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Describe the bug

Bug Description

The ComboBox component automatically selects an item when the typed text exactly matches an item's text (case-insensitive), even when noTypeahead={true} is set. This behavior breaks filtering UX patterns where users type to search/filter options before explicitly selecting one.

Environment

  • @ui5/webcomponents-react:
  • @ui5/webcomponents:
  • React: 18.3.1
  • Browser: Chrome/Firefox/Safari (all affected)

Steps to Reproduce

Impact

This breaks common UX patterns:

  1. Server-side filtering: Users type to filter a large list from the server. Auto-selection triggers unwanted data updates and API calls.

  2. Search-first workflows: Users want to narrow down options before selecting. Auto-selection forces premature selection.

  3. Form validation: Accidentally triggers validation logic when user is still typing.

Isolated Example

No response

Reproduction steps
  1. Create a ComboBox with the following configuration:
import { ComboBox, ComboBoxItem } from '@ui5/webcomponents-react'

function Example() {
  const [value, setValue] = useState('')
  
  const handleChange = (e) => {
    const selectedId = e?.detail?.item?.getAttribute('data-id')
    console.log('Selection changed to:', selectedId)
    setValue(selectedId)
  }

  return (
    <ComboBox
      noTypeahead
      value={value}
      onChange={handleChange}
    >
      <ComboBoxItem text="Alice" data-id="1" />
      <ComboBoxItem text="Bob" data-id="2" />
      <ComboBoxItem text="Charlie" data-id="3" />
    </ComboBox>
  )
}
  1. Focus the ComboBox and type "bob" (lowercase)
  2. Trigger blur
  3. Observe the console

Actual Behavior

  • Typing "bob" immediately triggers auto-selection of the "Bob" item
  • onChange fires automatically with "Bob" selected
  • This happens despite noTypeahead={true}
  • The behavior occurs for:
    • ✅ Exact match (case-insensitive): "bob" → selects "Bob"
    • ✅ Exact match (case-sensitive): "Bob" → selects "Bob"
    • ❌ Partial match: "bo" → no auto-selection (correct)
    • ❌ No match: "xyz" → no auto-selection (correct)
Expected Behaviour
  • Typing "bob" should filter the dropdown to show matching items
  • The input field should show "bob" as typed text
  • No selection should occur until the user explicitly:
    • Clicks an item in the dropdown
    • Presses Enter/Return to select the highlighted item
    • Uses arrow keys to navigate and then presses Enter
  • onChange should not fire from typing alone
Screenshots or Videos

https://github.com/user-attachments/assets/b9e3e458-9810-4534-8080-013aafbe389b

UI5 Web Components for React Version

2.15.3

UI5 Web Components Version

2.15.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the ComboBox component implementation and trace how noTypeahead is handled when typed text exactly matches an item. Reproduce the example with the "Bob" item and noTypeahead enabled, then verify that typing only filters and does not fire onChange; explicit item selection or Enter should still work.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.