fix(VSelect): allow null values to be selected (#4649)

* fix(VSelect): allow null values to be selected

fixes #4431

* refactor: remove redundant code

* spelign

* fix(v-select): update clearable to handle null values

wrote tests as well

Author: KaelWD

src/components/VAutocomplete/VAutocomplete.js

@@ -57,10 +57,7 @@ export default {
 
   data: vm => ({
     attrsInput: null,
-    lazySearch: vm.searchInput,
-    lazyValue: vm.value != null
-      ? vm.value
-      : vm.multiple ? [] : undefined
+    lazySearch: vm.searchInput
   }),
 
   computed: {
@@ -273,7 +270,7 @@ export default {
       }
     },
     clearableCallback () {
-      this.internalSearch = null
+      this.internalSearch = undefined
 
       VSelect.methods.clearableCallback.call(this)
     },
@@ -338,17 +335,11 @@ export default {
       this.setSearch()
     },
     setSelectedItems () {
-      if (this.internalValue == null ||
-        this.internalValue === ''
-      ) {
-        this.selectedItems = []
-      } else {
-        VSelect.methods.setSelectedItems.call(this)
+      VSelect.methods.setSelectedItems.call(this)
 
-        // #4273 Don't replace if searching
-        // #4403 Don't replace is focused
-        if (!this.isFocused) this.setSearch()
-      }
+      // #4273 Don't replace if searching
+      // #4403 Don't replace if focused
+      if (!this.isFocused) this.setSearch()
     },
     setSearch () {
       // Wait for nextTick so selectedItem

src/components/VSelect/VSelect.js

@@ -121,7 +121,7 @@ export default {
     // As long as a value is defined, show it
     // Otherwise, check if multiple
     // to determine which default to provide
-    lazyValue: vm.value != null
+    lazyValue: vm.value !== undefined
       ? vm.value
       : vm.multiple ? [] : undefined,
     selectedIndex: -1,
@@ -267,7 +267,7 @@ export default {
       this.isMenuActive = true
     },
     clearableCallback () {
-      this.internalValue = this.multiple ? [] : null
+      this.internalValue = this.multiple ? [] : undefined
       this.$emit('change', this.internalValue)
       this.$nextTick(() => this.$refs.input.focus())
 

test/unit/components/VAutocomplete/VAutocomplete.spec.js

@@ -690,7 +690,7 @@ test('VAutocomplete.js', ({ mount, shallow, compileToFunctions }) => {
 
     icon.trigger('click')
 
-    expect(wrapper.vm.internalSearch).toBe(null)
+    expect(wrapper.vm.internalSearch).toBe(undefined)
   })
 
   it('should propagate content class', () => {

test/unit/components/VSelect/VSelect2.spec.js

@@ -51,8 +51,8 @@ test('VSelect', ({ mount, compileToFunctions }) => {
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.internalValue).toBe(null)
-    expect(input).toHaveBeenCalledWith(null)
+    expect(wrapper.vm.internalValue).toBe(undefined)
+    expect(input).toHaveBeenCalledWith(undefined)
   })
 
   it('should be clearable with prop, dirty and single select', async () => {
@@ -73,7 +73,7 @@ test('VSelect', ({ mount, compileToFunctions }) => {
 
     clear.trigger('click')
     await wrapper.vm.$nextTick()
-    expect(wrapper.vm.internalValue).toBe(null)
+    expect(wrapper.vm.internalValue).toBe(undefined)
     expect(wrapper.vm.isMenuActive).toBe(false)
   })
 

test/unit/components/VSelect/VSelect3.spec.js

@@ -105,4 +105,31 @@ test('VSelect', ({ mount, compileToFunctions }) => {
     // Will be undefined if fails
     expect(wrapper.vm.listData.on).toBeTruthy()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/4431
+  it('should accept null and "" as values', async () => {
+    const wrapper = mount(VSelect, {
+      propsData: {
+        clearable: true,
+        items: [
+          { text: 'Foo', value: null },
+          { text: 'Bar', value: 'bar' }
+        ],
+        value: null
+      },
+    })
+
+    const icon = wrapper.first('.v-input__append-inner .v-icon')
+
+    expect(wrapper.vm.selectedItems.length).toBe(1)
+    expect(wrapper.vm.isDirty).toBe(true)
+
+    icon.trigger('click')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.selectedItems.length).toBe(0)
+    expect(wrapper.vm.isDirty).toBe(false)
+    expect(wrapper.vm.internalValue).toBe(undefined)
+  })
 })