Skip to content

[ComboBox]: Auto-Selection triggers with noTypeahead #12727

@layonez

Description

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

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

No one assigned

    Type

    Projects

    Status

    New Issues

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions