Fix bug where search inputs shared state across query loops#45
Conversation
The use of a global search context value meant that if multiple query loops were all made searchable, the last rendered or updated would "take over" all others. Moving search term scope to block context allows it to be managed independently per query loop.
… input Plus characters and certain % patterns would not be restored properly with this logic, which imperfectly reimplemented parts of WP Core's _sanitize_text_fields().
…nto sanitize_search_query_var()
There was a problem hiding this comment.
Pull request overview
Fixes an Interactivity bug where multiple Search blocks inside different Query Loop instances shared a single searchValue, causing all inputs to mirror each other after hydration. The PR scopes search state to each block’s Interactivity context and refactors the server-side value handling to avoid double-decoding while preserving user-visible whitespace.
Changes:
- Scope
searchValueto the blockcontext(instead of shared storestate) so multiple searchable query loops can coexist. - Replace custom search query sanitization with a helper that uses
sanitize_text_field()while restoring surrounding whitespace. - Initialize each Search block’s Interactivity context (
data-wp-context) with its own sanitizedsearchValue.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/taxonomy/view.js | Switches search handling from global store state to per-block Interactivity context. |
| inc/namespace.php | Adds a search sanitization helper and wires Search block rendering to use per-block context + the new sanitization. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
goldenapples
left a comment
goldenapples
left a comment
There was a problem hiding this comment.
Both of these fixes make sense. I'd just make sure that you add two entries to the changelog after merging, because these are essentially two different fixes (or one fix and one new feature).
| return ''; | ||
| } | ||
|
|
||
| $sanitized = sanitize_text_field( $value ); |
There was a problem hiding this comment.
One potential improvement:
| $sanitized = sanitize_text_field( $value ); | |
| $sanitized = sanitize_textarea_field( $value ); |
would remove the whitespace collapsing inside search terms, so that you could search for things like "a b" with a double space...
There was a problem hiding this comment.
Good catch! However in my testing this doesn't impact results or prevent you from typing multiple spaces when searching, so I propose we leave as-is since sanitize_text_field was the original method prior to https://github.com/humanmade/query-filter/pull/4/changes
This resolves a bug where using a search input within multiple query loops incorrectly caused all search input's state to be tied together.
Reproduction:
Expected: only the selected search box would update; Actual: both update.
Expected: Each query loop shows appropriate results, and each search box shows the respective correct term; Actual: The queries execute properly but once JS kicks in, the value of the first query loop is updated to match the second.
While testing, I realized there was a double-decoding issue in the custom sanitization around the search field. I've attempted to reimplement that to preserve the whitespace that #4 was intended to fix, but using core's own method to fix this doubled decoding issue.