[ComboBox] Popover-open refocus re-selects the whole value mid-typing, causing fast/programmatic input to be overwritten

[chriskari]

Bug Description

When typing into a ui5-combobox, opening the suggestions popover triggers a programmatic refocus of the inner input, which runs the "select entire value" logic intended for a fresh user focus. If a keystroke arrives during the asynchronous popover-open window, it lands on a fully-selected input and overwrites the value typed so far.

Concretely, typing default character-by-character can end up as fault: after de, type-ahead correctly completes to default and selects only the suffix fault; then the popover finishes opening, focus is handed back to the input, the selection expands to the whole default, and the next keystroke replaces everything.

This is a timing/edge race — it predominantly affects fast or programmatic typing (e2e tools such as Cypress, possibly IME/paste sequences). A human typing at normal speed rarely hits the window, so it surfaces as a rare, hard-to-reproduce flake.

Affected Component

ComboBox

Expected Behaviour

Selecting-all on focus is correct for a genuine user focus. But when the popover-open sequence programmatically returns focus to the input during active typing, the in-progress value should be preserved — the remaining keystrokes should advance/append, not overwrite a newly select-all'd value.

Isolated Example

No response

Steps to Reproduce

1. Render a ui5-combobox with several items, one of them default.
2. Focus the input and type default character-by-character at a fast cadence (~10ms/char, as e2e tooling does), so a matching character opens the suggestions popover.
3. Intermittently: once the popover finishes opening, the input's selection expands from the type-ahead suffix to the entire value, and the still-queued characters overwrite it — the final value ends up truncated/garbled (e.g. fault), and the popover filters to nothing.

Log Output, Stack Trace or Screenshots

combobox-focus-bug.mp4

Priority

Medium

UI5 Web Components Version

Observed on 2.24.0. Verified still present on the current latest 2.27.2 (ComboBox.js: _focusin line 341, _afterOpenPopover lines 366–368 — behavior unchanged).

Browser

Chrome

Operating System

No response

Additional Context

The two behaviors involved are each intentional; the defect is their interaction:

• _focusin selects the whole value (setSelectionRange(0, this.value.length)) — correct for a user-initiated focus.
• _afterOpenPopover calls this.inner.focus() to return focus to the input after the popover opens — correct for keyboard flow.

The problem: the programmatic refocus in _afterOpenPopover fires _focusin, which cannot distinguish "user just focused the field" from "focus was bounced back during typing," so it select-all's mid-edit. Because the popover open is async, a keystroke can slip in after the select-all.

Suggested scoped fix (not a removal of either behavior): suppress the _focusin select-all when the focus is the programmatic return from _afterOpenPopover while typing is in progress (e.g. guard on an "actively typing" flag), or avoid resetting the selection on that specific refocus. This preserves the standard select-all-on-user-focus UX and the post-open focus handling.

Organization

SAP Kyma

Declaration

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

[didip1000]

Hey @chriskari,

I tested some scenarios in cypress and couldn't reproduce the issue. Can you please share an example, maybe a cypress test, where this would fail?

Thanks,
Diana

[chriskari]

Hi @didip1000, thanks for looking into it. I think the reason a plain ComboBox does not reproduce it is that on a bare page the popover reopening does not really re-fire _focusin, because the focus never actually leaves the input. The part that makes the focus leave and come back during typing is an app re-render that recreates the inner input. Our app does this through a background refresh, and I believe this is the missing ingredient.

Here is a minimal repro. It stands in for that re-render by dropping and restoring the focus on each keystroke:

<ui5-combobox id="cb">
  <ui5-cb-item text="admissionregistration.k8s.io"></ui5-cb-item>
</ui5-combobox>
<script type="module">
  import "@ui5/webcomponents/dist/ComboBox.js";
  import "@ui5/webcomponents/dist/ComboBoxItem.js";
  const cb = document.getElementById("cb");
  cb.addEventListener("input", () => {
    requestAnimationFrame(() => {
      const inner = cb.shadowRoot.querySelector("input");
      if (cb.shadowRoot.activeElement === inner) {
        inner.blur();
        inner.focus(); // app re-render refocusing the input during typing
      }
    });
  });
</script>

// Cypress
cy.get("#cb").find("input").type("admissionregistration.k8s.io", { delay: 30 });
cy.get("#cb").find("input").should("have.value", "admissionregistration.k8s.io");
On my machine this overwrites the value 20 out of 20 times.

I also tried a fix. The idea is to select the whole value only on a real user focus, which carries sourceCapabilities. A programmatic refocus does not have it:

const userInitiated = !!e.sourceCapabilities;
if (!isPhone() && userInitiated) {
  e.target.setSelectionRange(0, this.value.length);
}

With this change I get 0 out of 20, and a real user click into a filled field still selects the whole value.

[didip1000]

Thank you @chriskari, I'll forward the ticket to the owners of the ComboBox.

Hey @UI5/ui5-team-ctr-ril, can you please take a look at this issue?

Best,
Diana