feat: add prop to not reset searchTerm (unovue#895)

zernonia · web-flow · commit 97e54ee99e73 · 2024-05-07T11:13:49.000+08:00
* feat: add prop to not reset searchTerm

* refactor: renaming prop name
diff --git a/packages/radix-vue/src/Combobox/Combobox.test.ts b/packages/radix-vue/src/Combobox/Combobox.test.ts
@@ -56,6 +56,21 @@ describe('given default Combobox', () => {
       expect(wrapper.html()).toContain('Apple')
     })
 
+    it('should reset searchTerm when close', async () => {
+      const input = wrapper.find('input')
+      input.element.value = 'Testing'
+      await input.trigger('keydown', { key: 'Escape' })
+      expect(input.element.value).toBe('')
+    })
+
+    it('should not reset searchTerm when close', async () => {
+      await wrapper.setProps({ resetSearchTermOnBlur: false, key: 'key' })
+      const input = wrapper.find('input')
+      input.element.value = 'Testing'
+      await input.trigger('keydown', { key: 'Escape' })
+      expect(input.element.value).toBe('Testing')
+    })
+
     describe('after selecting a value', () => {
       beforeEach(async () => {
         const selection = wrapper.findAll('[role=option]')[1]
diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -65,6 +65,10 @@ export interface ComboboxRootProps<T = AcceptableValue> extends PrimitiveProps {
   filterFunction?: (val: ArrayOrWrapped<T>, term: string) => ArrayOrWrapped<T>
   /** The display value of input for selected item. Does not work with `multiple`. */
   displayValue?: (val: T) => string
+  /** Whether to reset the searchTerm when the Combobox input blurred
+   * @defaultValue `true`
+  */
+  resetSearchTermOnBlur?: boolean
 }
 </script>
 
@@ -78,6 +82,7 @@ import isEqual from 'fast-deep-equal'
 
 const props = withDefaults(defineProps<ComboboxRootProps<T>>(), {
   open: undefined,
+  resetSearchTermOnBlur: true,
 })
 const emit = defineEmits<ComboboxRootEmits<T>>()
 
@@ -128,7 +133,8 @@ async function onOpenChange(val: boolean) {
   }
   else {
     isUserInputted.value = false
-    resetSearchTerm()
+    if (props.resetSearchTermOnBlur)
+      resetSearchTerm()
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,10 @@ export interface ComboboxRootProps<T = AcceptableValue> extends PrimitiveProps {`
`65`	`65`	`filterFunction?: (val: ArrayOrWrapped<T>, term: string) => ArrayOrWrapped<T>`
`66`	`66`	/** The display value of input for selected item. Does not work with `multiple`. */
`67`	`67`	`displayValue?: (val: T) => string`
	`68`	`+ /** Whether to reset the searchTerm when the Combobox input blurred`
	`69`	+ * @defaultValue `true`
	`70`	`+ */`
	`71`	`+ resetSearchTermOnBlur?: boolean`
`68`	`72`	`}`
`69`	`73`	`</script>`
`70`	`74`
`@@ -78,6 +82,7 @@ import isEqual from 'fast-deep-equal'`
`78`	`82`
`79`	`83`	`const props = withDefaults(defineProps<ComboboxRootProps<T>>(), {`
`80`	`84`	`open: undefined,`
	`85`	`+ resetSearchTermOnBlur: true,`
`81`	`86`	`})`
`82`	`87`	`const emit = defineEmits<ComboboxRootEmits<T>>()`
`83`	`88`
`@@ -128,7 +133,8 @@ async function onOpenChange(val: boolean) {`
`128`	`133`	`}`
`129`	`134`	`else {`
`130`	`135`	`isUserInputted.value = false`
`131`		`- resetSearchTerm()`
	`136`	`+ if (props.resetSearchTermOnBlur)`
	`137`	`+ resetSearchTerm()`
`132`	`138`	`}`
`133`	`139`	`}`
`134`	`140`