diff --git a/package.json b/package.json index 12793b4c..f2e682e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sysvale/cuida", - "version": "3.158.3", + "version": "3.158.4", "description": "A design system built by Sysvale, using storybook and Vue components", "repository": { "type": "git", diff --git a/src/components/Select.vue b/src/components/Select.vue index f23aaaf4..321f34c4 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -446,7 +446,7 @@ function filterOptions(value) { return; } - if (props.searchable && props.addable) { + if (props.searchable) { searchString.value = value; } @@ -601,11 +601,6 @@ function hide() { localValue.value = null; } - if (!searchString.value && !shouldClearSelection) { - localValue.value = localOptions.value.some(item => item[props.optionsField]?.toLowerCase() === get(localValue.value, props.optionsField)?.toLowerCase()) - ? localValue.value - : {}; - } nextTick(() => { localOptions.value = pristineOptions.value; diff --git a/src/tests/Select.spec.js b/src/tests/Select.spec.js index 929f1820..fef82833 100644 --- a/src/tests/Select.spec.js +++ b/src/tests/Select.spec.js @@ -1,7 +1,7 @@ -import { describe, test, expect } from 'vitest'; import { mount } from '@vue/test-utils'; -import Select from '../components/Select.vue'; +import { describe, expect, test } from 'vitest'; import CdsBaseInput from '../components/BaseInput.vue'; +import Select from '../components/Select.vue'; describe('Select', () => { test('renders correctly', () => { @@ -180,4 +180,62 @@ describe('Select', () => { await wrapper.find('input').trigger('blur'); expect(wrapper.vm.active).toBe(false); }); + + test('does not emit update:modelValue when focused and blurred without changes (when modelValue is empty)', async () => { + const wrapper = mount(Select, { + props: { + label: 'label', + id: 'select-input', + options: [{ value: 'Option 1' }, { value: 'Option 2' }], + modelValue: undefined, + }, + }); + + await wrapper.find('input').trigger('focus'); + await wrapper.find('input').trigger('blur'); + + expect(wrapper.emitted('update:modelValue')).toBeUndefined(); + }); + + test('does not reset modelValue when blurred with active filtered search (searchable: true)', async () => { + const wrapper = mount(Select, { + props: { + label: 'label', + id: 'select-input', + options: [{ value: 'Option 1' }, { value: 'Option 2' }], + searchable: true, + modelValue: { value: 'Option 1' }, + }, + }); + + await wrapper.find('input').trigger('focus'); + await wrapper.find('input').setValue('Option 2'); + await wrapper.findComponent(CdsBaseInput).trigger('input'); + + await wrapper.find('input').trigger('blur'); + + expect(wrapper.emitted('update:modelValue')).toBeUndefined(); + expect(wrapper.vm.localValue).toEqual({ value: 'Option 1' }); + }); + + test('set modelValue to null when blurred with active filtered search that does not find any items (searchable: true)', async () => { + const wrapper = mount(Select, { + props: { + label: 'label', + id: 'select-input', + options: [{ value: 'Option 1' }, { value: 'Option 2' }], + searchable: true, + modelValue: { value: 'Option 1' }, + }, + }); + + await wrapper.find('input').trigger('focus'); + await wrapper.find('input').setValue('Not an option'); + await wrapper.findComponent(CdsBaseInput).trigger('input'); + + await wrapper.find('input').trigger('blur'); + + expect(wrapper.emitted('update:modelValue')).toStrictEqual([[ null ]]); + expect(wrapper.vm.localValue).toBeNull(); + }); });