[ComboBox]: Auto-Selection triggers with noTypeahead
Nobody has claimed this yet.
- 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:
-
Server-side filtering: Users type to filter a large list from the server. Auto-selection triggers unwanted data updates and API calls.
-
Search-first workflows: Users want to narrow down options before selecting. Auto-selection forces premature selection.
-
Form validation: Accidentally triggers validation logic when user is still typing.
Isolated Example
No response
Reproduction steps
- 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>
)
}
- Focus the ComboBox and type "bob" (lowercase)
- Trigger blur
- Observe the console
Actual Behavior
- Typing "bob" immediately triggers auto-selection of the "Bob" item
onChangefires 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
onChangeshould 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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