Skip to content

Link Control: Validate on submit #75310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeryj merged 2 commits into from
Feb 10, 2026
Merged

Link Control: Validate on submit #75310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4eaf5a7
Link Control: Validate on submit
jeryj Feb 6, 2026
b07b004
Fix e2e test to match new flow
jeryj Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,7 +629,6 @@ function LinkControl( {
hideLabelFromVision={ ! showTextControl }
isEntity={ isEntity }
customValidity={ customValidity }
required={ showTextControl }
suffix={
<SearchSuffixControl
isEntity={ isEntity }
Expand Down
10 changes: 4 additions & 6 deletions packages/block-editor/src/components/link-control/search-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const LinkControlSearchInput = forwardRef(
suffix,
isEntity = false,
customValidity: customValidityProp,
required,
},
ref
) => {
Expand Down Expand Up @@ -149,11 +148,10 @@ const LinkControlSearchInput = forwardRef(
showInitialSuggestions
}
customValidity={ customValidityProp }
// When required=false, validation is handled manually via onSubmit and handleSubmit.
// When required=true (e.g., in modals with text control), browser validation is used.
// Use markWhenOptional when required=true to suppress the "(Required)" indicator.
required={ required }
markWhenOptional={ required }
// Validation is handled manually via onSubmit and handleSubmit. We may be able to rely
// on browser validation when enhancements land to base level components:
// https://github.com/WordPress/gutenberg/pull/75188#issuecomment-3861757260
required={ false }
onSubmit={ ( suggestion, event ) => {
const hasSuggestion = suggestion || focusedSuggestion;

Expand Down
23 changes: 18 additions & 5 deletions test/e2e/specs/editor/blocks/navigation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1329,6 +1329,10 @@ test.describe( 'Navigation block', () => {
await expect( linkPopover ).toBeHidden();
} );

const linkInput = linkPopover.getByRole( 'combobox', {
name: 'Link',
} );

await test.step( 'Verify unsync button works in Link UI popover', async () => {
// Open Link UI via keyboard shortcut
await pageUtils.pressKeys( 'primary+k' );
Expand All @@ -1340,10 +1344,6 @@ test.describe( 'Navigation block', () => {
.getByRole( 'button', { name: 'Edit' } )
.click();

const linkInput = linkPopover.getByRole( 'combobox', {
name: 'Link',
} );

// Find and click unsync button
const unsyncButton = linkPopover.getByRole( 'button', {
name: 'Unsync and edit',
Expand All @@ -1356,11 +1356,24 @@ test.describe( 'Navigation block', () => {
await expect( linkInput ).toHaveValue( '' );
} );

await test.step( 'Verify link field validates on blur in Link UI popover', async () => {
await test.step( 'Verify link field validates on submit in Link UI popover', async () => {
await page.keyboard.type( 'invalid url string' );

await page.keyboard.press( 'Tab' );

// Verify validation error is not shown on blur
await expect(
page.getByText( 'Please fill out this field' )
).toBeHidden();

// Go back to the link input and press enter to submit
await pageUtils.pressKeys( 'Shift+Tab' );
await expect( linkInput ).toBeFocused();
await page.keyboard.press( 'Enter' );

// Verify validation error is shown
await expect(
page.getByText( 'Please enter a valid URL.' )
).toBeVisible();
} );

Expand Down
Loading