Link Control: Prevent link validation on blur#75188
Closed
Conversation
|
Size Change: +44 B (0%) Total Size: 2.99 MB
ℹ️ View Unchanged
|
jeryj
changed the title
jeryj
added
the
[Feature] Link Editing
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
tellthemachines
approved these changes
Feb 4, 2026
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
Thanks for the quick fix! Works well in testing both by adding Nav links and inline text links. Code LGTM too
Co-authored-by: Cursor <cursoragent@cursor.com>
getdave
approved these changes
Feb 4, 2026
Contributor
getdave
left a comment
getdave
left a comment
There was a problem hiding this comment.
Updating the Core component rather than patching our implementation seems like the right move.
That said, if there's any concern from components team then we can fall back to the other approach whilst they wrangle a suitable API.
I noticed some e2e failures but that might get fixed via a rebase so maybe try that first.
Otherwise let's bring this in!
|
Flaky tests detected in f0bd420. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21671689386
|
Contributor
Author
|
Happy to wait for a review from the @WordPress/gutenberg-components team before merging. Thanks for the quick reviews @tellthemachines and @getdave! |
ciampo
reviewed
Feb 4, 2026
| ! event.currentTarget.contains( event.relatedTarget ) | ||
| ) { | ||
| setIsTouched( true ); | ||
| getValidityTarget()?.setAttribute( VALIDITY_VISIBLE_ATTRIBUTE, '' ); |
Contributor
There was a problem hiding this comment.
I don't have deep knowledge about how the component works exactly, but could there be instances where we were relying on this attribute, and deleting this line could cause a regression?
Contributor
Author
There was a problem hiding this comment.
Oh - that's my fault. I thought Claude had added that, so I removed the line 😅 I can add it back in if we need it.
Contributor
There was a problem hiding this comment.
Should the rest of the validated control components also be updated?
mirka
reviewed
Feb 4, 2026
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
This use case suggests to me that the input field is in fact not required. Could we simply do no validation when the field is empty? I don't think it's necessary that the field be marked required, since it's more like a hybrid of a URL input and a search field.
Contributor
Author
I considered this too. It's required if you're using it in certain contexts. Does the onBlur check only happen if it's a required field? If so, then not having it be truly required would be a possible route.
I tried this approach first, but validation on blur still gets in the way. For example, you could
|
Member
This means that it shouldn't have a custom validity set until the user intent is made clear. Note that the blur logic is only about error message visibility. Like the native browser APIs, when you set a custom validity, that field is functionally/semantically already invalid, regardless of whether any visual feedback is shown yet. I think the key here will be to set the custom validity only when we're sure the field is actually invalid. Here's an example. |
Contributor
Author
|
@mirka - I did an alternate PR that only marks the field as required when it's really required, and checks the validation when we want it checked. It works well! No |
Contributor
Author
|
@mirka We may still need some kind of "don't validate on blur," or maybe add a special case if your input is a combobox? In the LinkControl, when editing an existing link, the field is truly required. It's using the validated input as a combobox, and clicking one of the options causes the validation to run due to the input losing focus. Screen.Recording.2026-02-06.at.11.09.15.AM.mov |
Member
|
The The plan is to expose this That is just to say what the longer-term plans are, but in the short term, were you able to work around that with the "don't set validity until submit" approach? |
Contributor
Author
Yup! #75267 marks the field as not required so we don't validate unless they are trying to create a link from that step. We may also need to not mark the field as required in the issue I mention in #75188 (comment). |
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
5 participants
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.
What?
Closes #75185
When using the LinkControl component (e.g., in the Navigation block), clicking the "Create Page" button or other suggestion items triggers a validation error: "Please fill out this field." This occurs because:
ValidatedInputControlwithrequired={true}ControlWithErrormarks blurred fields as "touched"This is problematic because the create page button is a separate action from link submission—it shouldn't trigger input validation.
Why?
How?
I looked at two different approaches. One that avoids modifying the components package, and one that adds a
validateOnBlurprop to theValidatedControlPropscomponent.Approach 1: Event Interception in Block-Editor (Initial Fix - no need to touch components package)
See commit 09bc8e5 for implementation.
Implementation:
ValidatedInputControlin a div withonBlurCaptureLinkControlSearchInput) passed anonBlurhandler that calledevent.stopPropagation()ControlWithError'sonBlurhandlerCode:
Pros:
ControlWithErrorCons:
Approach 2: Add a
validateOnBlurProp toValidatedControlProps(Current Solution)Implementation:
validateOnBlurprop toValidatedControlProps(defaults totrue)ControlWithErrorto skip marking field as touched whenvalidateOnBlur={false}ValidatedInputControl→ControlWithErrorLinkControlSearchInputuses<URLInput validateOnBlur={false} />Pros:
ValidatedInputControlcan opt out of blur validationvalidateOnBlur={false}clearly expresses intenttrue, existing behavior unchangedCons:
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast