Skip to content

fix: set option.selected before dispatching input event for select and combobox - #1187

Open
syrfmy wants to merge 2 commits into
qwikifiers:mainfrom
syrfmy:fix/hidden-option-validation
Open

fix: set option.selected before dispatching input event for select and combobox#1187
syrfmy wants to merge 2 commits into
qwikifiers:mainfrom
syrfmy:fix/hidden-option-validation

Conversation

@syrfmy

@syrfmy syrfmy commented Aug 7, 2026

Copy link
Copy Markdown

What is it?

  • Feature / enhancement
  • Bug
  • Docs / tests
  • Other

Why is it needed?

Closes #1171
Closes #1186

Currently, in hidden-select-option.tsx and combobox-hidden-option.tsx, the input event was dispatched before setting the selected property on the <option>. This caused Modular Forms to read stale validation state because the DOM element hadn't updated its selected attribute yet when the event fired.

Why does this bug only happen when selecting a new option after already having one selected?
If you select the last option directly from an empty state, it works. The bug only manifests when you select an initial option (e.g., Option 0) and then select the last option (Option 4).
Here is why:

  • When the selection changes from Option 0 to Option 4, the reactive state for both options changes.
  • Qwik executes useTask$ top-down.
  • Option 0's task runs first: it fires an input event, then sets its .selected = false.
  • Option 4's task runs last: it fires an input event first (at this exact moment, Option 0 is false and Option 4 is still false, so the <select> is completely empty!). Modular Forms catches this event, reads the empty DOM state, and updates its internal state to "invalid/empty".
  • Option 4 then sets its .selected = true, but it's too late — Modular Forms' internal state is already stuck on the stale empty read.

This PR fixes form validation by:

  1. Setting option.selected before dispatching the input event.
  2. Optimizing the dispatch so the event is only fired once (by the last option in the list), rather than sequentially for every single option whose state changes. This improves performance and prevents these exact race conditions in the test suite.

Includes new E2E tests for both Select and Combobox that specifically test the "select initial option -> select last option -> submit" flow to ensure this regression never happens again.

(Note: Some pre-existing tests in the suite appear to be flaky and fail intermittently. These failures are unrelated to the changes in this PR.)

Checklist:

  • My code follows the developer guidelines of this project
  • I have performed a self-review of my own code
  • I have ran pnpm change and documented my changes
  • I have add necessary docs (if needed)
  • Added new tests to cover the fix / functionality

@changeset-bot

changeset-bot Bot commented Aug 7, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4d6906c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@qwik-ui/headless Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@syrfmy
syrfmy force-pushed the fix/hidden-option-validation branch from be9442f to 4d6906c Compare August 7, 2026 06:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant