Add Enter keydown event listener to search input

WordPress · Jun 11, 2024 · 0493b67 · 0493b67
1 parent bd22cbb
commit 0493b67
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/plugins/speculation-rules/hooks.php b/plugins/speculation-rules/hooks.php
@@ -101,6 +101,12 @@ function plsr_filter_searchform( $form ): string {
 		) {
 			$p->set_attribute( "{$directive_prefix}--focus--{$namespace}", "{$namespace}::actions.updateSpeculativeLoadUrl" );
 			$p->set_attribute( "{$directive_prefix}--pointerover--{$namespace}", "{$namespace}::actions.updateSpeculativeLoadUrl" );
+		} elseif (
+			'INPUT' === $p->get_tag()
+			&&
+			's' === $p->get_attribute( 'name' )
+		) {
+			$p->set_attribute( "{$directive_prefix}--keydown--{$namespace}", "{$namespace}::actions.handleInputKeydown" );
 		}
 	}
 

diff --git a/plugins/speculation-rules/search-form.js b/plugins/speculation-rules/search-form.js
@@ -5,7 +5,7 @@ import {
 	getElement,
 } from '@wordpress/interactivity';
 
-store( 'speculationRules', {
+const { actions } = store( 'speculationRules', {
 	callbacks: {
 		doSpeculativeLoad: () => {
 			/**
@@ -42,6 +42,7 @@ store( 'speculationRules', {
 		},
 	},
 	actions: {
+		// TODO: Is this really actually callback?
 		updateSpeculativeLoadUrl: () => {
 			const context = getContext();
 			const { ref } = getElement();
@@ -55,6 +56,12 @@ store( 'speculationRules', {
 				context.speculativeLoadUrl = url.href;
 			}
 		},
+		handleInputKeydown: ( event ) => {
+			// Eke out a few milliseconds when hitting enter on the input to submit.
+			if ( event.key === 'Enter' ) {
+				actions.updateSpeculativeLoadUrl();
+			}
+		},
 		handleFormSubmit: ( event ) => {
 			const context = getContext();
 			if ( context.speculativeLoadUrl ) {