diff --git a/.changeset/gentle-bags-pay.md b/.changeset/gentle-bags-pay.md new file mode 100644 index 000000000..e9289407b --- /dev/null +++ b/.changeset/gentle-bags-pay.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +fixed select returning empty array when cleared diff --git a/packages/component-library/src/components/form/mt-select/mt-select.spec.ts b/packages/component-library/src/components/form/mt-select/mt-select.spec.ts index 95eaa7698..e2185be48 100644 --- a/packages/component-library/src/components/form/mt-select/mt-select.spec.ts +++ b/packages/component-library/src/components/form/mt-select/mt-select.spec.ts @@ -79,4 +79,75 @@ describe("mt-select", () => { expect(itemHolder).toHaveLength(1); expect((itemHolder.at(0)?.element as HTMLInputElement).value).toBe("Id 0"); }); + + it("should return null when single selection is cleared", async () => { + const wrapper = await createWrapper(); + + await wrapper.setProps({ + modelValue: "becky", + options: [ + { + id: 1, + label: "Option Alfred", + value: "alfred", + }, + { + id: 2, + label: "Option Becky", + value: "becky", + }, + { + id: 3, + label: "Option Jane", + value: "jane", + }, + ], + }); + + // Verify starting values + const itemHolder = wrapper.findAll(".mt-select-selection-list__input"); + expect(itemHolder).toHaveLength(1); + + // Click the clear button + const clearButton = wrapper.find('[data-testid="select-clear-button"]'); + await clearButton.trigger("click"); + + expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([null]); + }); + + it("should render multiple selections correctly", async () => { + const wrapper = await createWrapper(); + + await wrapper.setProps({ + modelValue: ["alfred", "becky", "jane"], + enableMultiSelection: true, + options: [ + { + id: 1, + label: "Option Alfred", + value: "alfred", + }, + { + id: 2, + label: "Option Becky", + value: "becky", + }, + { + id: 3, + label: "Option Jane", + value: "jane", + }, + ], + }); + + const itemHolders = wrapper.findAll(".mt-select-selection-list__item-holder"); + expect(itemHolders).toHaveLength(3); + + // Click the clear button + const clearButton = wrapper.find('[data-testid="select-clear-button"]'); + await clearButton.trigger("click"); + + // Verify that an empty array is emitted + expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([[]]); + }); }); diff --git a/packages/component-library/src/components/form/mt-select/mt-select.vue b/packages/component-library/src/components/form/mt-select/mt-select.vue index aa94579a1..0958114f6 100644 --- a/packages/component-library/src/components/form/mt-select/mt-select.vue +++ b/packages/component-library/src/components/form/mt-select/mt-select.vue @@ -400,9 +400,8 @@ export default defineComponent({ currentValue: { get(): string | number | boolean | unknown[] | null | undefined { if (this.modelValue === null || this.modelValue === undefined) { - return []; + return this.enableMultiSelection ? [] : null; } - return this.modelValue; }, set(newValue: string | number | boolean | unknown[] | null | undefined) { @@ -565,7 +564,8 @@ export default defineComponent({ }, onClearSelection() { - this.currentValue = []; + // If multiSelection enabled return empty array otherwise null + this.currentValue = this.enableMultiSelection ? [] : null; }, getFocusElement() {