fix: fixed select on ficus, added hideShortcutIconOnBlur prop

Author: kouts

src/SearchInput.vue

@@ -14,10 +14,10 @@
       @blur="hasFocus = false"
       @keydown="onKeydown"
     />
-    <slot v-if="shortcutIcon && !hasFocus && modelValue.length === 0" name="shortcut-icon">
+    <slot v-if="showShortcutIcon" name="shortcut-icon">
       <i class="search-icon shortcut" title='Press "/" to search'></i>
     </slot>
-    <slot v-if="clearIcon && modelValue.length > 0" name="clear-icon" :clear="clear">
+    <slot v-if="showClearIcon" name="clear-icon" :clear="clear">
       <i class="search-icon clear" @mousedown="clear"></i>
     </slot>
   </div>
@@ -61,6 +61,7 @@ export default defineComponent({
     searchIcon: defaultBoolean(),
     shortcutIcon: defaultBoolean(),
     clearIcon: defaultBoolean(),
+    hideShortcutIconOnBlur: defaultBoolean(),
     clearOnEsc: defaultBoolean(),
     blurOnEsc: defaultBoolean(),
     selectOnFocus: defaultBoolean(),
@@ -82,6 +83,14 @@ export default defineComponent({
       return res
     })
 
+    const showClearIcon = computed(() => !!(props.clearIcon && props.modelValue.length > 0))
+
+    const showShortcutIcon = computed(() => {
+      if (props.shortcutIcon && !hasFocus.value && !props.hideShortcutIconOnBlur) return true
+      if (props.shortcutIcon && !hasFocus.value && props.modelValue.length === 0) return true
+      return false
+    })
+
     const clear = () => {
       emit('update:modelValue', '')
     }
@@ -117,7 +126,7 @@ export default defineComponent({
           })
         const elToFocus = allVisibleSearchInputs.length > 1 ? allVisibleSearchInputs[0] : inputRef.value
         elToFocus?.focus()
-        elToFocus?.select()
+        if (props.selectOnFocus) elToFocus?.select()
       }
     }
 
@@ -146,7 +155,9 @@ export default defineComponent({
       onInput,
       onKeydown,
       attrsStyles,
-      attrsWithoutStyles
+      attrsWithoutStyles,
+      showClearIcon,
+      showShortcutIcon
     }
   }
 })

tests/searchInput.spec.ts

@@ -108,7 +108,7 @@ describe('SearchInput.vue', () => {
     expect(wrapper.emitted()['update:modelValue'][0]).toEqual([''])
   })
 
-  it('esc key clears the value', async () => {
+  it('clears the value with the "esc" key', async () => {
     const wrapper = createWrapper({
       props: {
         modelValue: 'test'
@@ -187,4 +187,16 @@ describe('SearchInput.vue', () => {
 
     expect(inputs[0].element).toBe(document.activeElement)
   })
+
+  it('should render a shortcut icon when the hideShortcutIconOnBlur prop is false', async () => {
+    const wrapper = createWrapper({
+      props: {
+        hideShortcutIconOnBlur: false
+      }
+    })
+
+    const i = await wrapper.find('i.search-icon.shortcut')
+
+    expect(i).toBeTruthy()
+  })
 })