Submit form using click handler

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 e35cdf3,
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

@@ -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(

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>

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() )