Merge pull request #1139 from dpc-sdp/bugfix/R20-1868-clr-btn-fix

fix(@dpc-sdp/ripple-ui-core): fixed search bar clear btn submitting form when not wanted
dpc-sdp · Apr 30, 2024 · 91d239a · 91d239a
2 parents d0196b9 + ab209fd
commit 91d239a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue
@@ -15,6 +15,7 @@
       :getOptionId="(itm:any) => itm?.id || itm?.name"
       :getSuggestionVal="(itm:any) => itm?.name || ''"
       :isFreeText="false"
+      :submitOnClear="true"
       @submit="submitAction"
       @update:input-value="onUpdate"
     >

diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
@@ -31,6 +31,7 @@ interface Props {
   isOptionSelectable?: Function
   showLabel?: boolean
   isFreeText?: boolean
+  submitOnClear?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -49,7 +50,8 @@ const props = withDefaults(defineProps<Props>(), {
   getOptionId: (opt) => opt,
   isOptionSelectable: (opt) => true,
   showLabel: false,
-  isFreeText: true
+  isFreeText: true,
+  submitOnClear: false
 })
 
 type Timer = ReturnType<typeof setTimeout>
@@ -173,19 +175,21 @@ const handleClear = async () => {
   emit('update:inputValue', null)
   internalValue.value = ''
 
-  emitRplEvent(
-    'submit',
-    {
-      action: 'search',
-      id: props.id,
-      text: '',
-      name: props.inputLabel,
-      value: '',
-      payload: null,
-      type: 'suggestion'
-    },
-    { global: props.globalEvents }
-  )
+  if (props.submitOnClear) {
+    emitRplEvent(
+      'submit',
+      {
+        action: 'search',
+        id: props.id,
+        text: '',
+        name: props.inputLabel,
+        value: '',
+        payload: null,
+        type: 'suggestion'
+      },
+      { global: props.globalEvents }
+    )
+  }
 
   await nextTick()
   inputRef.value?.focus()