Fixes: Mobile - Mark non-submit buttons with "type=button"

husam-ebish · Jun 7, 2023 · b8e52f7 · b8e52f7
1 parent 99c1694
commit b8e52f7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/app/frontend/apps/mobile/pages/ticket/views/TicketCreate.vue b/app/frontend/apps/mobile/pages/ticket/views/TicketCreate.vue
@@ -509,9 +509,10 @@ export default {
       <div class="flex items-center justify-self-end text-base">
         <CommonButton
           variant="submit"
+          form="ticket-create"
+          type="submit"
           :disabled="submitButtonDisabled"
           transparent-background
-          @click="formSubmit"
         >
           {{ $t('Create') }}
         </CommonButton>

diff --git a/app/frontend/shared/components/Form/fields/FieldSecurity/FieldSecurity.vue b/app/frontend/shared/components/Form/fields/FieldSecurity/FieldSecurity.vue
@@ -67,6 +67,7 @@ useTraverseOptions(optionsContainer, { direction: 'horizontal' })
     <button
       v-for="{ option, label, icon } of options"
       :key="option"
+      type="button"
       role="option"
       class="flex select-none items-center gap-1 rounded-md px-2 py-1 text-base"
       :class="{

diff --git a/app/frontend/shared/components/Form/fields/FieldSecurity/__tests__/FieldSecurity.spec.ts b/app/frontend/shared/components/Form/fields/FieldSecurity/__tests__/FieldSecurity.spec.ts
@@ -1,6 +1,7 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import { FormKit } from '@formkit/vue'
+import Form from '#shared/components/Form/Form.vue'
 import { renderComponent } from '#tests/support/components/index.ts'
 
 const renderSecurityField = (props: any = {}) => {
@@ -88,4 +89,35 @@ describe('FieldSecurity', () => {
     expect(encrypt).toHaveAttribute('aria-selected', 'false')
     expect(sign).toHaveAttribute('aria-selected', 'false')
   })
+
+  it("doesn't submit form on click", async () => {
+    const onSubmit = vi.fn()
+    const view = renderComponent(Form, {
+      form: true,
+      formField: true,
+      props: {
+        onSubmit,
+        schema: [
+          {
+            type: 'security',
+            name: 'security',
+            label: 'Security',
+            props: {
+              allowed: ['encryption', 'sign'],
+            },
+          },
+        ],
+      },
+    })
+
+    await view.events.click(
+      await view.findByRole('option', { name: 'Encrypt' }),
+    )
+
+    expect(onSubmit).not.toHaveBeenCalled()
+
+    await view.events.click(await view.findByRole('option', { name: 'Sign' }))
+
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
 })