-
Notifications
You must be signed in to change notification settings - Fork 280
Labels
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
Screen.Recording.2025-11-26.at.15.38.22.mov
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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
New Issues