fix: submit pre chat triggering native submit event (#10224)

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -1,10 +1,11 @@
 <script>
 import emojis from './emojisGroup.json';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const SEARCH_KEY = 'Search';
 
 export default {
-  components: { FluentIcon },
+  components: { FluentIcon, WootButton },
   props: {
     onClick: {
       type: Function,
@@ -97,7 +98,7 @@ export default {
           class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
-        <woot-button
+        <WootButton
           v-if="showRemoveButton"
           size="small"
           variant="smooth"
@@ -106,7 +107,7 @@ export default {
           @click="onClick('')"
         >
           {{ $t('EMOJI.REMOVE') }}
-        </woot-button>
+        </WootButton>
       </div>
       <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
         <h5 class="emoji-category--title">

app/javascript/widget/components/PreChat/Form.vue

@@ -25,7 +25,7 @@ export default {
       default: () => {},
     },
   },
-  emits: ['submit'],
+  emits: ['submitPreChat'],
   setup() {
     const phoneInput = createInput(PhoneInput, {
       props: ['hasErrorInPhoneInput'],
@@ -252,7 +252,7 @@ export default {
     },
     onSubmit() {
       const { emailAddress, fullName, phoneNumber, message } = this.formValues;
-      this.$emit('submit', {
+      this.$emit('submitPreChat', {
         fullName,
         phoneNumber,
         emailAddress,
@@ -277,6 +277,7 @@ export default {
       inputClass: 'hidden',
       wrapperClass: 'hidden',
     }"
+    @submit="onSubmit"
   >
     <div
       v-if="shouldShowHeaderMessage"

app/javascript/widget/views/PreChatForm.vue

@@ -61,6 +61,6 @@ export default {
 
 <template>
   <div class="flex flex-1 overflow-auto">
-    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
+    <PreChatForm :options="preChatFormOptions" @submit-pre-chat="onSubmit" />
   </div>
 </template>