[ComboBox]: Auto-Selection triggers with noTypeahead

[layonez]

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>
  )
}

2. Focus the ComboBox and type "bob" (lowercase)
3. Trigger blur
4. 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

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.

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[layonez]

@Lukas742 thankt you, I also created and tested a fix for that issue, please take a look #12728

[nnaydenow]

Hi @UI5/ui5-team-ctr-ril,

Please take a look at the issue and the linked PR.

[hristop]

Hi @layonez ,

We will have to discuss this with our UX design colleagues in order to clarify if the behavior is expected or not. We will post an update here once we have response.

Best Regards,
Hristo

[layonez]

Nice, thank you @hristop

As an additional input from UX perspective - we are trying to use that component in SAP Signavio as part of business critical form Form, which has sensitive data in it - so we expect changes in selected values to be explicit and clear for user.

Current implementation is triggering auto-selection without user clicks and there is a chance for selection change to be un-noticed, which is not acceptable in our case.

It's blocking us right now from using that component, at the same time there is no other dropdown + filter functionality available in UI5 components.

[layonez]

@hristop hey, any updates on that topic or a timeline?

[hristop]

@layonez i have conveyed this to our designers. They have not provided timeline, but they said that this needs to be discussed on their internal round and they will come back to me once they do so. I will get back to you then.