[TikiWiki-commits] [Git][tikiwiki/tiki][30.x] [BP][FIX][UX] Element Plus Select: keep remote multiple selects usable after selection

MAGENE Sem Joel pushed to branch 30.x at Tiki Wiki CMS Groupware / Tiki


Commits:
c9e515b9 by MAGENE Sem Joel at 2026-08-06T18:14:21+00:00
[BP][FIX][UX] Element Plus Select: keep remote multiple selects usable after selection
---
* [FIX][UX] Element Plus Select: keep remote multiple selects usable after selection
---
* [FIX][UX] Element Plus Select: keep remote multiple selects usable after selection

See merge request tikiwiki/tiki!10606

(cherry picked from commit 1d16f5d539269fbcb558d39366b81e4570c1eb06)

See merge request tikiwiki/tiki!10855

- - - - -


2 changed files:

- src/js/vue-widgets/element-plus-ui/src/components/Select/Select.vue
- src/js/vue-widgets/element-plus-ui/src/tests/components/Select.test.js


Changes:

=====================================
src/js/vue-widgets/element-plus-ui/src/components/Select/Select.vue
=====================================
@@ -63,6 +63,16 @@ const getOptionsProp = computed(() => {
 });
 const options = ref([]);
 const wrapperRef = ref(null);
+const deduplicateOptionsByValue = (items) => {
+    const seenValues = new Set();
+    return items.filter((item) => {
+        if (seenValues.has(item.value)) {
+            return false;
+        }
+        seenValues.add(item.value);
+        return true;
+    });
+};
 
 const handleValueChange = (value) => {
     // check if the checkbox with id "intertrans-active" is checked
@@ -97,10 +107,10 @@ const remoteMethod = async (query) => {
 
         const data = await response.json();
         const loadedOptions = data.map(item => (typeof item === "string" ? { value: item, label: item } : item));
-        const newOptions = [
+        const newOptions = deduplicateOptionsByValue([
             ...options.value.filter(item => modelValue.value?.includes(item.value)),
             ...loadedOptions,
-        ];
+        ]);
         options.value = newOptions;
     } catch (error) {
         console.error('Error loading remote options:', error);


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/components/Select.test.js
=====================================
@@ -273,6 +273,28 @@ describe("Select", () => {
             expect(renderedOption2.getAttribute("label")).toBe(expectedData[0].label);
         });
 
+        test("does not duplicate an already-selected option returned by remote search", async () => {
+            const givenProps = {
+                ...basicProps,
+                multiple: "true",
+                value: JSON.stringify(["foo"]),
+                remoteSourceUrl: "http://foo.bar",
+            };
+            const expectedData = [
+                { value: "foo", label: "Foo remote" },
+                { value: "baz", label: "Baz remote" },
+            ];
+
+            getFetchSpy(expectedData);
+
+            render(Select, { props: givenProps });
+
+            await ElSelect.mock.calls[0][0]["remote-method"]("query");
+
+            const renderedOptions = screen.getAllByTestId(DATA_TEST_ID.SELECT_OPTION);
+            expect(renderedOptions.map((option) => option.getAttribute("value"))).toEqual(["foo", "baz"]);
+        });
+
         test("should not trigger the remote search when the query is empty", async () => {
             const givenProps = {
                 ...basicProps,



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c9e515b93cacd3b57f6982179210de1d34358565

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c9e515b93cacd3b57f6982179210de1d34358565
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs