[TikiWiki-commits] [Git][tikiwiki/tiki][30.x] [BP][FIX][UX] Multiple-choices combobox dropdown picker widgets: Prevent the...

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


Commits:
36eedc18 by MAGENE Sem Joel at 2026-06-25T10:15:19+00:00
[BP][FIX][UX] Multiple-choices combobox dropdown picker widgets: Prevent the list of items from closing after an item is selected.
---
* [FIX][UX] Element Plus Select: Single-select dropdown reopening regression
---
* [FIX][UX] Element Plus Select: Single-select dropdown reopening regression

See merge request tikiwiki/tiki!10465

(cherry picked from commit 69ecdeed07488db0c30cbf1df24e0868b77f9dfc)

* [FIX] Multiple-choices combobox dropdown picker widgets: Prevent the list of items from closing after an item is selected.
---
* [FIX] Multiple-choices combobox dropdown picker widgets: Prevent the list of items from closing after an item is selected.

See merge request tikiwiki/tiki!10233

(cherry picked from commit 0ceb4cd167b85ce11a058a1caaf0e4fbf2d0ba0b)

See merge request tikiwiki/tiki!10598

- - - - -


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
=====================================
@@ -19,7 +19,12 @@ watch(() => props.value, (newValue) => {
 });
 
 const isInvalid = computed(() => normalize(props.isInvalid, false));
-const multiple = computed(() => normalize(props.multiple, false))
+const normalizeBooleanAttribute = (value) => {
+    const normalized = normalize(value, false);
+    // HTML boolean attributes can be serialized as an empty string.
+    return normalized === "" || Boolean(normalized);
+}
+const multiple = computed(() => normalizeBooleanAttribute(props.multiple))
 const clearable = computed(() => normalize(props.clearable, false));
 const collapseTags = computed(() => normalize(props.collapseTags, false));
 const filterable = computed(() =>
@@ -138,7 +143,7 @@ export const DATA_TEST_ID = {
     <ConfigWrapper :language="language">
         <div :class="{ 'invalid': isInvalid }" :data-testid="DATA_TEST_ID.SELECT_WRAPPER" ref="wrapperRef">
             <el-select v-model="modelValue" :multiple="multiple" :filterable="filterable" :allow-create="allowCreate"
-                default-first-option :reserve-keyword="false" :placeholder="placeholder" :teleported="false"
+                default-first-option :reserve-keyword="false" :placeholder="placeholder" :teleported="false" :automatic-dropdown="multiple"
                 @change="handleValueChange" :multiple-limit="parseInt(max ?? 0, 10)" :clearable="clearable"
                 :collapse-tags="collapseTags" :max-collapse-tags="parseInt(maxCollapseTags ?? 0, 10)" :size="size"
                 :data-testid="DATA_TEST_ID.SELECT_ELEMENT" :remote-method="remoteMethod"
@@ -157,4 +162,4 @@ export const DATA_TEST_ID = {
             </el-select>
         </div>
     </ConfigWrapper>
-</template>
\ No newline at end of file
+</template>


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/components/Select.test.js
=====================================
@@ -71,7 +71,12 @@ describe("Select", () => {
         });
 
         expect(ElSelect).toHaveBeenCalledWith(
-            expect.objectContaining({ modelValue: JSON.parse(basicProps.value), remote: false, "empty-values": [null, undefined] }),
+            expect.objectContaining({
+                modelValue: JSON.parse(basicProps.value),
+                remote: false,
+                "automatic-dropdown": false,
+                "empty-values": [null, undefined],
+            }),
             expect.any(Object)
         );
 
@@ -114,6 +119,7 @@ describe("Select", () => {
                 "collapse-tags": true,
                 "max-collapse-tags": parseInt(givenProps.maxCollapseTags, 10),
                 "multiple-limit": parseInt(givenProps.max, 10),
+                "automatic-dropdown": true,
                 "empty-values": [null, undefined],
             }),
             expect.any(Object)
@@ -141,6 +147,31 @@ describe("Select", () => {
         );
     });
 
+    test.each([
+        { name: "missing", multipleProp: undefined, expectedMultiple: false },
+        { name: "false boolean", multipleProp: false, expectedMultiple: false },
+        { name: "false string", multipleProp: "false", expectedMultiple: false },
+        { name: "true boolean", multipleProp: true, expectedMultiple: true },
+        { name: "true string", multipleProp: "true", expectedMultiple: true },
+        { name: "jQuery boolean attribute", multipleProp: "multiple", expectedMultiple: true },
+        { name: "empty boolean attribute", multipleProp: "", expectedMultiple: true },
+    ])("normalizes the multiple prop as a boolean: $name", ({ multipleProp, expectedMultiple }) => {
+        render(Select, {
+            props: {
+                ...basicProps,
+                ...(multipleProp === undefined ? {} : { multiple: multipleProp }),
+            },
+        });
+
+        expect(ElSelect).toHaveBeenCalledWith(
+            expect.objectContaining({
+                multiple: expectedMultiple,
+                "automatic-dropdown": expectedMultiple,
+            }),
+            expect.any(Object)
+        );
+    });
+
     test("renders correctly grouped options", () => {
         const givenProps = {
             ...basicProps,



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/36eedc18d6b6ef3bcd15e5c2a3f430b3e3d340cd
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