fix(VSelect): hide-selected with return-object (#19807)

fixes #19806
vuetifyjs · May 14, 2024 · aa79f16 · aa79f16
1 parent 2553fe6
commit aa79f16
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -176,7 +176,7 @@ export const VSelect = genericComponent<new <
 
     const displayItems = computed(() => {
       if (props.hideSelected) {
-        return items.value.filter(item => !model.value.some(s => s === item))
+        return items.value.filter(item => !model.value.some(s => props.valueComparator(s, item)))
       }
       return items.value
     })

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -460,6 +460,44 @@ describe('VSelect', () => {
       cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 3')
       cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(1).should('have.text', 'Item 4')
     })
+
+    // https://github.com/vuetifyjs/vuetify/issues/19806
+    it('should hide selected item(s) with return-object', () => {
+      const selectedItem = ref({ text: 'Item 1', id: 'item1' })
+      const items = ref([
+        {
+          text: 'Item 1',
+          id: 'item1',
+        },
+        {
+          text: 'Item 2',
+          id: 'item2',
+        },
+        {
+          text: 'Item 3',
+          id: 'item3',
+        },
+      ])
+      cy.mount((props: any) => (
+          <VSelect
+            v-model={ selectedItem.value }
+            hideSelected
+            items={ items.value }
+            item-title="text"
+            item-value="id"
+            returnObject
+          />
+      )).get('.v-select').click()
+        .get('.v-list-item--active').should('have.length', 0)
+        .get('.v-overlay__content .v-list-item').should('have.length', 2)
+        .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 2')
+        .get('.v-overlay__content .v-list-item').eq(0).click({ waitForAnimations: false }).should(() => {
+          expect(selectedItem.value).to.deep.equal({ text: 'Item 2', id: 'item2' })
+        })
+        .get('.v-list-item--active').should('have.length', 0)
+        .get('.v-overlay__content .v-list-item').should('have.length', 2)
+        .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 1')
+    })
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/16055