Repository navigation
Keep search text typed before the page finishes loading - #64
Merged
Merged
Conversation
Before hydration the search input accepted typing, then React reset it to its empty initial state. The input is now read-only until a mount effect marks it ready. CI also runs the iPhone (WebKit) project, which reproduces the bug reliably. Amp-Thread-ID: https://ampcode.com/threads/T-01a18b16-89b6-7301-9d0c-e6ff7f681d32 Co-authored-by: Lada Kesseler <archie.kesseler@gmail.com>
This was referenced Oct 30, 2026
The input stays uncontrolled until hydrated, then the mount effect copies what the reader already typed into state. The early-typing test now types with the keyboard during the delayed load, since fill() waits for an editable input and hid the dropped keystrokes under the readOnly approach. Amp-Thread-ID: https://ampcode.com/threads/T-01a18b16-89b6-7301-9d0c-e6ff7f681d32 Co-authored-by: Lada Kesseler <archie.kesseler@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Text typed into the search bar before hydration was erased: the server-rendered input accepted keystrokes, then React hydrated it back to its empty initial state. On slow loads (and reliably on WebKit) the search looked broken.
Fix
SearchBarleaves the input uncontrolled until hydrated (value={isHydrated ? searchQuery : undefined}). The mount effect copies whatever the reader already typed (inputRef.current.value) intosearchQuery, then setsisHydrated. Early keystrokes are kept and searched instead of blocked.An earlier revision made the input
readOnlyuntil mount. That silently dropped early keystrokes, and the test hid it becausefill()waits for an editable input.Known side effect: switching from uncontrolled to controlled makes React log a dev-only "changing an uncontrolled input to be controlled" warning (it shows up in Jest output). Production builds don't log it, and no test fails on it.
Tests
text typed while the page is still loading is kept: delays/_next/static/chunks/**by 2s, focuses the input and types withpage.keyboard.typeduring the delayed load, then expects results plus the typed value. It failed on desktop-chrome and iphone against bothmainand thereadOnlyrevision, and passes now.--repeat-each=2: onmain11 of 20 failed in the dev orb; now 22 of 22 pass../test.sh: 370 passed.npm run lint: clean../e2e.sh: 93 passed, 0 failed (9 skipped are pre-existing).CI
.github/workflows/deploy.ymlnow installschromium webkitand runs--project=desktop-chrome --project=iphone.