From 9af87296dd9e99b0d060e16b0b72e168373d1160 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 7 Oct 2024 16:19:28 +0200
Subject: [PATCH] Submit form using click handler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Putting the event handler on the button seems more intuitive to me, and
works around T376622 (a Codex button doesn’t submit the form when
activated using the keyboard). Note that a “click” handler on a button
also fires when it’s activated using the keyboard (this is standard
browser behavior but still works on a Codex button).

As far as I’m aware, there was no special reason to have the event
handler on the form before – the event handler was added in e35cdf36d1,
replacing a different attribute on the <form>, so it probably just
seemed natural to put the event handler on the <form> at the time.

Bug: T370052
Bug: T376622
---
 cypress/e2e/NewLexemeForm.cy.js         | 12 ++++++------
 src/components/NewLexemeForm.vue        |  3 ++-
 tests/integration/NewLexemeForm.test.ts | 14 +++++++-------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/NewLexemeForm.cy.js b/cypress/e2e/NewLexemeForm.cy.js
index 9a5ef20f..ed29565a 100644
--- a/cypress/e2e/NewLexemeForm.cy.js
+++ b/cypress/e2e/NewLexemeForm.cy.js
@@ -74,8 +74,8 @@ describe( 'NewLexemeForm', () => {
 			.type( '=Q456', { delay: 0 } );
 		cy.get( '.wbl-snl-lexical-category-lookup .wikit-OptionsMenu__item' ).click();
 
-		cy.get( '.wbl-snl-form' )
-			.submit();
+		cy.get( '.wbl-snl-form button' )
+			.click();
 
 		cy.get( '@alert' ).then( ( spy ) => {
 			expect( spy ).to.have.been.calledWith(
@@ -111,8 +111,8 @@ describe( 'NewLexemeForm', () => {
 			.type( 'en-ca', { delay: 0 } );
 		cy.get( '.wbl-snl-spelling-variant-lookup .wikit-OptionsMenu__item' ).click();
 
-		cy.get( '.wbl-snl-form' )
-			.submit();
+		cy.get( '.wbl-snl-form button' )
+			.click();
 
 		cy.get( '@alert' ).then( ( spy ) => {
 			expect( spy ).to.have.been.calledWith(
@@ -166,8 +166,8 @@ describe( 'NewLexemeForm', () => {
 				expect( $input ).to.have.value( 'Q456' );
 			} );
 
-		cy.get( '.wbl-snl-form' )
-			.submit();
+		cy.get( '.wbl-snl-form button' )
+			.click();
 
 		cy.get( '@alert' ).then( ( spy ) => {
 			expect( spy ).to.have.been.calledWith(
diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue
index b22d6576..07d5ed76 100644
--- a/src/components/NewLexemeForm.vue
+++ b/src/components/NewLexemeForm.vue
@@ -152,7 +152,7 @@ export default {
 </script>
 
 <template>
-	<form class="wbl-snl-form" @submit.prevent="onSubmit">
+	<form class="wbl-snl-form">
 		<lemma-input
 			v-model="lemma"
 		/>
@@ -182,6 +182,7 @@ export default {
 				weight="primary"
 				type="submit"
 				:disabled="submitting"
+				@click.prevent="onSubmit"
 			>
 				{{ submitButtonText }}
 			</cdx-button>
diff --git a/tests/integration/NewLexemeForm.test.ts b/tests/integration/NewLexemeForm.test.ts
index 085a2305..6c76a850 100644
--- a/tests/integration/NewLexemeForm.test.ts
+++ b/tests/integration/NewLexemeForm.test.ts
@@ -201,7 +201,7 @@ describe( 'NewLexemeForm', () => {
 			const spellingVariantInput = wrapper.find( '.wbl-snl-spelling-variant-lookup input' );
 			expect( spellingVariantInput.exists() ).toBe( false );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 			await flushPromises();
 
 			expect( createLexeme ).toHaveBeenCalledWith( 'foo', 'de', 'Q123', 'Q456' );
@@ -237,7 +237,7 @@ describe( 'NewLexemeForm', () => {
 			await spellingVariantInput.setValue( 'en' );
 			await wrapper.find( '.wbl-snl-spelling-variant-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 			await flushPromises();
 
 			expect( createLexeme ).toHaveBeenCalledWith( 'foo', 'en-gb', 'Q123', 'Q456' );
@@ -271,7 +271,7 @@ describe( 'NewLexemeForm', () => {
 			const spellingVariantInput = wrapper.find( '.wbl-snl-spelling-variant-lookup input' );
 			expect( spellingVariantInput.exists() ).toBe( false );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const submitButton = wrapper.find( '.cdx-button' );
 			expect( submitButton.attributes( 'disabled' ) ).toBe( '' );
@@ -306,7 +306,7 @@ describe( 'NewLexemeForm', () => {
 			await selectLanguage( wrapper, '=Q123' );
 			await selectLexicalCategory( wrapper, '=Q456' );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const lemmaInputWrapper = wrapper.get( '.wbl-snl-lemma-input' );
 			expect( lemmaInputWrapper.get( '.cdx-message--error' ).text() ).toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-lemma-empty-error' ) );
@@ -336,7 +336,7 @@ describe( 'NewLexemeForm', () => {
 			await setLemmaInput( wrapper, 'foo' );
 			await selectLanguage( wrapper, '=Q123' );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const lexicalCategoryInputWrapper = wrapper.get( '.wbl-snl-lexical-category-lookup' );
 			expect( lexicalCategoryInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )
@@ -366,7 +366,7 @@ describe( 'NewLexemeForm', () => {
 			await setLemmaInput( wrapper, 'foo' );
 			await selectLexicalCategory( wrapper, '=Q456' );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const languageInputWrapper = wrapper.get( '.wbl-snl-language-lookup' );
 			expect( languageInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )
@@ -403,7 +403,7 @@ describe( 'NewLexemeForm', () => {
 			await selectLanguage( wrapper );
 			await selectLexicalCategory( wrapper );
 
-			await wrapper.trigger( 'submit' );
+			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const spellingVariantInputWrapper = wrapper.get( '.wbl-snl-spelling-variant-lookup' );
 			expect( spellingVariantInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )