Merge "Special:Block [Codex]: Pressing enter should submit the form"

2 files changed, 31 insertions, 0 deletions

diff --git a/resources/src/mediawiki.special.block/SpecialBlock.vue b/resources/src/mediawiki.special.block/SpecialBlock.vue
index 96c02c023096..54a0740bc1c3 100644
--- a/resources/src/mediawiki.special.block/SpecialBlock.vue
+++ b/resources/src/mediawiki.special.block/SpecialBlock.vue
@@ -435,6 +435,20 @@ module.exports = exports = defineComponent( {
 			}
 		} );
 
+		// Submit the form if form is visible and 'Enter' is pressed
+		watch( formVisible, ( newValue ) => {
+			if ( newValue ) {
+				nextTick( () => {
+					const blockForm = document.querySelector( '.mw-block__block-form' );
+					blockForm.addEventListener( 'keypress', ( event ) => {
+						if ( event.key === 'Enter' ) {
+							onFormSubmission( event );
+						}
+					} );
+				} );
+			}
+		} );
+
 		// Show the 'Add block' button if:
 		// * the target user exists AND EITHER
 		//   * multiblocks is enabled, OR
diff --git a/tests/jest/mediawiki.special.block/SpecialBlock.test.js b/tests/jest/mediawiki.special.block/SpecialBlock.test.js
index c9ee64fe06d2..9970666ea6dd 100644
--- a/tests/jest/mediawiki.special.block/SpecialBlock.test.js
+++ b/tests/jest/mediawiki.special.block/SpecialBlock.test.js
@@ -354,6 +354,23 @@ describe( 'SpecialBlock', () => {
 		expect( wrapper.find( '.mw-block__create-button' ).exists() ).toBeFalsy();
 	} );
 
+	it( 'should emit "submit" event when Enter key is pressed', async () => {
+		wrapper = withSubmission(
+			{ blockTargetUser: 'ActiveBlockedUser', blockTargetExists: true },
+			{ block: { user: 'ActiveBlockedUser' } }
+		);
+		await flushPromises();
+		// Create a new block.
+		await wrapper.find( '.mw-block__create-button' ).trigger( 'click' );
+		// Set expiry date
+		await wrapper.find( '.cdx-radio__input[value=datetime]' ).setValue( true );
+		await wrapper.find( '[name=wpExpiry-other]' ).setValue( '2999-01-23T12:34' );
+		expect( wrapper.find( '.mw-block-success' ).exists() ).toBeFalsy();
+		// Simulate a press enter
+		await wrapper.find( '[name="wpReason-other"]' ).trigger( 'keypress', { key: 'Enter' } );
+		expect( wrapper.find( '.mw-block-success' ).exists() ).toBeTruthy();
+	} );
+
 	afterEach( () => {
 		wrapper.unmount();
 	} );