fix(inputs): reset value to null instead of undefined (#12373)

closes #7429
vuetifyjs · Nov 3, 2020 · 8e5554d · 8e5554d
1 parent 5695513
commit 8e5554d
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 29 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
@@ -50,8 +50,7 @@ export default VSelect.extend({
     },
     noFilter: Boolean,
     searchInput: {
-      type: String as PropType<string | undefined>,
-      default: undefined,
+      type: String as PropType<string | null>,
     },
   },
 
@@ -96,10 +95,10 @@ export default VSelect.extend({
       })
     },
     internalSearch: {
-      get (): string | undefined {
+      get (): string | null {
         return this.lazySearch
       },
-      set (val: any) {
+      set (val: any) { // TODO: this should be `string | null` but it breaks lots of other types
         this.lazySearch = val
 
         this.$emit('update:search-input', val)
@@ -177,7 +176,7 @@ export default VSelect.extend({
     isMenuActive (val) {
       if (val || !this.hasSlot) return
 
-      this.lazySearch = undefined
+      this.lazySearch = null
     },
     items (val, oldVal) {
       // If we are focused, the menu
@@ -285,15 +284,15 @@ export default VSelect.extend({
       const nextItem = this.selectedItems[nextIndex]
 
       if (!nextItem) {
-        this.setValue(this.multiple ? [] : undefined)
+        this.setValue(this.multiple ? [] : null)
       } else {
         this.selectItem(curItem)
       }
 
       this.selectedIndex = nextIndex
     },
     clearableCallback () {
-      this.internalSearch = undefined
+      this.internalSearch = null
 
       VSelect.options.methods.clearableCallback.call(this)
     },

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts
@@ -401,7 +401,7 @@ describe('VAutocomplete.ts', () => {
     wrapper.setData({ isMenuActive: false })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.lazySearch).toBeUndefined()
+    expect(wrapper.vm.lazySearch).toBeNull()
   })
 
   it('should select input text on focus', async () => {

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
@@ -216,7 +216,7 @@ describe('VAutocomplete.ts', () => {
 
     icon.trigger('click')
 
-    expect(wrapper.vm.internalSearch).toBeUndefined()
+    expect(wrapper.vm.internalSearch).toBeNull()
   })
 
   it('should propagate content class', () => {

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts
@@ -141,7 +141,7 @@ describe('VAutocomplete.ts', () => {
     input.trigger('keydown.backspace')
     input.trigger('keydown.backspace')
 
-    expect(wrapper.vm.internalValue).toBeUndefined()
+    expect(wrapper.vm.internalValue).toBeNull()
 
     wrapper.setProps({
       multiple: true,

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.ts b/packages/vuetify/src/components/VCombobox/VCombobox.ts
@@ -189,7 +189,7 @@ export default VAutocomplete.extend({
 
       // Reset search if using slot
       // to avoid a double input
-      if (isUsingSlot) this.internalSearch = undefined
+      if (isUsingSlot) this.internalSearch = null
     },
     updateSelf () {
       this.multiple ? this.updateTags() : this.updateCombobox()

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.ts b/packages/vuetify/src/components/VFileInput/VFileInput.ts
@@ -165,7 +165,7 @@ export default VTextField.extend({
 
   methods: {
     clearableCallback () {
-      this.internalValue = this.isMultiple ? [] : undefined
+      this.internalValue = this.isMultiple ? [] : null
       this.$refs.input.value = ''
     },
     genChips () {

diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.ts b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.ts
@@ -140,7 +140,7 @@ describe('VFileInput.ts', () => {
     })
 
     wrapper.vm.clearableCallback()
-    expect(wrapper.vm.internalValue).toBeUndefined()
+    expect(wrapper.vm.internalValue).toBeNull()
 
     const wrapper2 = mountFunction({
       attrs: { multiple: '' },

diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -290,7 +290,7 @@ export default baseMixins.extend<options>().extend({
       this.isMenuActive = true
     },
     clearableCallback () {
-      this.setValue(this.multiple ? [] : undefined)
+      this.setValue(this.multiple ? [] : null)
       this.setMenuIndex(-1)
       this.$nextTick(() => this.$refs.input && this.$refs.input.focus())
 

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect2.spec.ts b/packages/vuetify/src/components/VSelect/__tests__/VSelect2.spec.ts
@@ -274,8 +274,8 @@ describe('VSelect.ts', () => {
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.internalValue).toBeUndefined()
-    expect(input).toHaveBeenCalledWith(undefined)
+    expect(wrapper.vm.internalValue).toBeNull()
+    expect(input).toHaveBeenCalledWith(null)
   })
 
   it('should be clearable with prop, dirty and single select', async () => {
@@ -296,7 +296,7 @@ describe('VSelect.ts', () => {
 
     clear.trigger('click')
     await wrapper.vm.$nextTick()
-    expect(wrapper.vm.internalValue).toBeUndefined()
+    expect(wrapper.vm.internalValue).toBeNull()
     expect(wrapper.vm.isMenuActive).toBe(false)
   })
 

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect4.spec.ts b/packages/vuetify/src/components/VSelect/__tests__/VSelect4.spec.ts
@@ -76,18 +76,8 @@ describe('VSelect.ts', () => {
       },
     })
 
-    const icon = wrapper.find('.v-input__append-inner .v-icon')
-
     expect(wrapper.vm.selectedItems).toHaveLength(1)
     expect(wrapper.vm.isDirty).toBe(true)
-
-    icon.trigger('click')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedItems).toHaveLength(0)
-    expect(wrapper.vm.isDirty).toBe(false)
-    expect(wrapper.vm.internalValue).toBeUndefined()
   })
 
   it('should only calls change once when clearing', async () => {

diff --git a/packages/vuetify/src/mixins/validatable/__tests__/validatable.spec.ts b/packages/vuetify/src/mixins/validatable/__tests__/validatable.spec.ts
@@ -390,7 +390,7 @@ describe('validatable.ts', () => {
     wrapper.vm.reset()
 
     expect(wrapper.vm.isResetting).toBe(true)
-    expect(wrapper.vm.internalValue).toBeUndefined()
+    expect(wrapper.vm.internalValue).toBeNull()
 
     wrapper.setProps({ value: ['foobar'] })
 

diff --git a/packages/vuetify/src/mixins/validatable/index.ts b/packages/vuetify/src/mixins/validatable/index.ts
@@ -236,7 +236,7 @@ export default baseMixins.extend({
       this.isResetting = true
       this.internalValue = Array.isArray(this.internalValue)
         ? []
-        : undefined
+        : null
     },
     /** @public */
     resetValidation () {