fix(DFV): surface field id on loader div so label for resolves before hydration - #7575
Open
faisalahammad wants to merge 3 commits into
Open
Conversation
DFV fields emit only a loader <div> server-side; the actual <input> appears after React hydrates. The sibling <label for=...> therefore points at an id that does not exist in the SSR markup, which breaks browser autofill and accessibility tools. The id is already computed in PodsForm::merge_attributes() and shipped to React via build_dfv_field_data()['htmlAttr']['id']. Re-use that same value on the loader <div> so the label resolves immediately and React hydration stays unchanged. Fixes pods-framework#7278.
PR Summary
|
Contributor
Author
|
AI disclosure: this PR was written with Claude Opus 5 assistance, reviewed and tested by me. |
…r div
The previous approach put the field id on the .pods-dfv-field loader div.
DFV renders through ReactDOM.createPortal() into that same div (core/app.js),
and the field controls already apply htmlAttr.id themselves, so the div and
the control ended up sharing one id. document.getElementById() returns the
first match in document order -- the wrapper div -- which broke
wysiwyg/tinymce.js destroyEditor()/reInit(), and a <div> is not a labelable
element so <label for> could not address it anyway.
The loader markup is restored, and the real gap is closed instead: the
react-select based pick controls never received an id at all, so
<label for="pods-form-ui-{name}"> had nothing to resolve to. FullSelect now
accepts inputId and forwards it to react-select, which applies it to its
internal <input>.
Refs pods-framework#7278
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
1 participant
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.
Description
DFV fields (file, avatar, code, boolean, wysiwyg, etc.) currently render only a loader
<div>server-side. The actual<input id="...">only appears after React hydrates, which means the sibling<label for="pods-form-ui-{name}">points at an id that does not exist in the SSR markup. This breaks browser autofill, accessibility tools, and Lighthouse form-label checks.The id formula was already in
PodsForm::merge_attributes()and forwarded to React viabuild_dfv_field_data()['htmlAttr']['id']. This change emits that same id on the loader<div>itself, so the label resolves before hydration and React behavior is unchanged (the inner control still reads the same id fromhtmlAttr).Related GitHub issue(s)
Fixes #7278
Testing instructions
id="pods-form-ui-{field-name}"on the<div class="pods-form-ui-field pods-dfv-field pods-dfv-field--unloaded">.<label for="pods-form-ui-{field-name}">resolves to that same id byte-for-byte.-2/-3suffix keeps eachlabel+ loader id pair consistent.Screenshots / screencast
Not applicable.
Changelog text for these changes
Bug: DFV field labels no longer dangle — the loader element now carries the id the
<label for>already points to, so browser autofill and accessibility checks resolve correctly. #7278 (@faisalahammad)PR checklist