fix(InputMenu/Select/SelectMenu): show falsy value when model value is falsy (#4882)

Co-authored-by: Benjamin Canac <[email protected]>

Author: rdjanuar

src/runtime/utils/index.ts

@@ -130,17 +130,21 @@ export function getDisplayValue<T, V>(
 ): string | undefined {
   const { valueKey, labelKey } = options
 
-  if (isEmpty(value)) {
-    return undefined
-  }
-
   const foundItem = items.find((item) => {
     const itemValue = (typeof item === 'object' && item !== null && valueKey)
       ? get(item, valueKey as string)
       : item
     return compare(itemValue, value)
   })
 
+  if (isEmpty(value) && foundItem) {
+    return labelKey ? get(foundItem as Record<string, any>, labelKey as string) : undefined
+  }
+
+  if (isEmpty(value)) {
+    return undefined
+  }
+
   const source = foundItem ?? value
 
   if (source === null || source === undefined) {

test/components/InputMenu.spec.ts

@@ -117,6 +117,63 @@ describe('InputMenu', () => {
     })
   })
 
+  describe('it should display correct label', () => {
+    test.each([null, undefined, ''])('falsy model value %s should display placeholder', (modelValue) => {
+      const wrapper = mount(InputMenu, {
+        props: {
+          items,
+          modelValue,
+          placeholder: 'Select an item'
+        }
+      })
+
+      expect(wrapper.find('input').attributes('placeholder')).toBe('Select an item')
+    })
+
+    test('with string array and string value', () => {
+      const wrapper = mount(InputMenu, {
+        props: {
+          items: ['Apple', 'Banana', 'Cherry'],
+          modelValue: 'Banana'
+        }
+      })
+
+      expect(wrapper.find('input').element.value).toBe('Banana')
+    })
+
+    test('with multiple and empty array value should display placeholder', () => {
+      const wrapper = mount(InputMenu, {
+        props: {
+          items,
+          multiple: true,
+          modelValue: [],
+          placeholder: 'Select items'
+        }
+      })
+      expect(wrapper.find('input').attributes('placeholder')).toBe('Select items')
+    })
+
+    test('with falsy modelValue and options items contain falsy', async () => {
+      const wrapper = mount(InputMenu, {
+        props: {
+          items: [
+            {
+              label: 'John Doe',
+              value: null
+            },
+            {
+              label: 'John Lennon',
+              value: 1
+            }
+          ],
+          valueKey: 'value',
+          modelValue: null
+        }
+      })
+      expect(wrapper.find('input').element.value).toBe('John Doe')
+    })
+  })
+
   describe('form integration', async () => {
     async function createForm(validateOn?: FormInputEvents[]) {
       const wrapper = await renderForm({

test/components/Select.spec.ts

@@ -84,6 +84,63 @@ describe('Select', () => {
     expect(html).toMatchSnapshot()
   })
 
+  describe('it should display correct label', () => {
+    test.each([null, undefined, ''])('falsy model value %s should display placeholder', (modelValue) => {
+      const wrapper = mount(Select, {
+        props: {
+          items,
+          modelValue,
+          placeholder: 'Select an item'
+        }
+      })
+
+      expect(wrapper.text()).toBe('Select an item')
+    })
+
+    test('with string array and string value', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items: ['Apple', 'Banana', 'Cherry'],
+          modelValue: 'Banana'
+        }
+      })
+
+      expect(wrapper.text()).toBe('Banana')
+    })
+
+    test('with multiple and empty array value should display placeholder', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items,
+          multiple: true,
+          modelValue: [],
+          placeholder: 'Select items'
+        }
+      })
+      expect(wrapper.text()).toBe('Select items')
+    })
+
+    test('with falsy modelValue and options items contain falsy', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items: [
+            {
+              label: 'John Doe',
+              value: null
+            },
+            {
+              label: 'John Lennon',
+              value: 1
+            }
+          ],
+          valueKey: 'value',
+          modelValue: null
+        }
+      })
+      expect(wrapper.text()).toBe('John Doe')
+    })
+  })
+
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })

test/components/SelectMenu.spec.ts

@@ -113,6 +113,63 @@ describe('SelectMenu', () => {
     })
   })
 
+  describe('it should display correct label', () => {
+    test.each([null, undefined, ''])('falsy model value %s should display placeholder', (modelValue) => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          items,
+          modelValue,
+          placeholder: 'Select an item'
+        }
+      })
+
+      expect(wrapper.text()).toBe('Select an item')
+    })
+
+    test('with string array and string value', () => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          items: ['Apple', 'Banana', 'Cherry'],
+          modelValue: 'Banana'
+        }
+      })
+
+      expect(wrapper.text()).toBe('Banana')
+    })
+
+    test('with multiple and empty array value should display placeholder', () => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          items,
+          multiple: true,
+          modelValue: [],
+          placeholder: 'Select items'
+        }
+      })
+      expect(wrapper.text()).toBe('Select items')
+    })
+
+    test('with falsy modelValue and options items contain falsy', () => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          items: [
+            {
+              label: 'John Doe',
+              value: null
+            },
+            {
+              label: 'John Lennon',
+              value: 1
+            }
+          ],
+          valueKey: 'value',
+          modelValue: null
+        }
+      })
+      expect(wrapper.text()).toBe('John Doe')
+    })
+  })
+
   describe('form integration', async () => {
     async function createForm(validateOn?: FormInputEvents[]) {
       const wrapper = await renderForm({