[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Element Plus select: keep disabled options disabled

ushindi bienvenu pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
ce999f13 by MAGENE Sem Joel at 2026-06-23T12:07:43+00:00
[FIX][UI] Element Plus select: keep disabled options disabled
---
* [FIX][UI] Element Plus select: keep disabled options disabled

See merge request tikiwiki/tiki!10544

- - - - -


5 changed files:

- src/js/vue-widgets/element-plus-ui/src/components/Select/Select.vue
- src/js/vue-widgets/element-plus-ui/src/helpers/select/applySelect.js
- src/js/vue-widgets/element-plus-ui/src/tests/components/Select.test.js
- src/js/vue-widgets/element-plus-ui/src/tests/helpers/select/applySelect.test.js
- templates/user/manage_groups.tpl


Changes:

=====================================
src/js/vue-widgets/element-plus-ui/src/components/Select/Select.vue
=====================================
@@ -46,6 +46,7 @@ const getOptionsProp = computed(() => {
             group.options.push({
                 label: item.label,
                 value: item.value,
+                disabled: item.disabled,
             });
         } else {
             acc.push({
@@ -53,6 +54,7 @@ const getOptionsProp = computed(() => {
                 options: [{
                     label: item.label,
                     value: item.value,
+                    disabled: item.disabled,
                 }],
             });
         }


=====================================
src/js/vue-widgets/element-plus-ui/src/helpers/select/applySelect.js
=====================================
@@ -59,6 +59,10 @@ export function syncSelectOptions(elementPlusSelect, select) {
 }
 
 export function attachChangeEventHandler(elementPlusSelect, select) {
+    $(select).on("change", function () {
+        syncSelectOptions(elementPlusSelect, select);
+    });
+
     $(elementPlusSelect).on("select-change", function (event) {
         const selectedValues = event.detail[0].value;
         // Adding new items to the select list


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/components/Select.test.js
=====================================
@@ -177,7 +177,7 @@ describe("Select", () => {
             ...basicProps,
             options: JSON.stringify([
                 { value: "foo", label: "Foo", group: "Group 1" },
-                { value: "bar", label: "Bar", group: "Group 1" },
+                { value: "bar", label: "Bar", group: "Group 1", disabled: true },
                 { value: "foo 2", label: "Foo 2", group: "Group 2" },
                 { value: "bar 2", label: "Bar 2", group: "Group 2" },
             ]),


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/helpers/select/applySelect.test.js
=====================================
@@ -59,6 +59,28 @@ describe("applySelect helper functions", () => {
         ]);
     });
 
+    test("updates the element-plus-ui options when the native select change event is triggered", async () => {
+        const givenSelect = document.createElement("select");
+        const givenElementPlusUi = document.createElement("element-plus-ui");
+        const selectOption = document.createElement("option");
+        selectOption.value = "foo";
+        givenSelect.appendChild(selectOption);
+
+        attachChangeEventHandler(givenElementPlusUi, givenSelect);
+
+        selectOption.disabled = true;
+        $(givenSelect).trigger("change");
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        expect(JSON.parse(givenElementPlusUi.getAttribute("options"))).toEqual([{ value: "foo", label: selectOption.textContent, disabled: true }]);
+
+        selectOption.disabled = false;
+        $(givenSelect).trigger("change");
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        expect(JSON.parse(givenElementPlusUi.getAttribute("options"))).toEqual([{ value: "foo", label: selectOption.textContent, disabled: false }]);
+    });
+
     test("updates the element-plus-ui groups when the select grouped options change", async () => {
         const givenSelect = document.createElement("select");
         const givenElementPlusUi = document.createElement("element-plus-ui");


=====================================
templates/user/manage_groups.tpl
=====================================
@@ -38,27 +38,14 @@
                 </div>
             {/if}
             {jq}
-$("input[name=add_remove]").on("change", function () {
-    const userGroups = $("#select_groups").data("usergroups");
-    const mode = $("input[name=add_remove]:checked").val() === "add";
-    if ($(this).prop("checked") && userGroups) {
-        // filter the group list to ones this user is not in
-        $("option", "#select_groups").each(function () {
-            if ($.inArray($(this).val(), userGroups) > -1) {
-                $(this).prop("disabled", mode).css("opacity", mode ? .3 : 1);
-            } else {
-                $(this).prop("disabled", ! mode).css("opacity", ! mode ? .3 : 1);
-            }
-        });
-    }
-}).trigger("change");
+var $selectGroups = $("#select_groups");
 
-$("#select_groups").on("change", function () {
+$selectGroups.on("change", function () {
     const mode = $("input[name=add_remove]:checked").val() === "add";
     const $defaultGroup = $("#default_group");
 
-    const userGroups = $("#select_groups").data("usergroups");
-    const selectedGroups = $(this).val();
+    const userGroups = $selectGroups.data("usergroups") || [];
+    const selectedGroups = $(this).val() || [];
     let setAndSelectedGroups = [];
     if (mode) {
         setAndSelectedGroups = [...userGroups, ...selectedGroups];
@@ -89,6 +76,22 @@ $("#select_groups").on("change", function () {
         });
     }
 });
+
+$("input[name=add_remove]").on("change", function () {
+    const userGroups = $selectGroups.data("usergroups");
+    const mode = $("input[name=add_remove]:checked").val() === "add";
+    if ($(this).prop("checked") && userGroups) {
+        // filter the group list to ones this user is not in
+        $("option", $selectGroups).each(function () {
+            if ($.inArray($(this).val(), userGroups) > -1) {
+                $(this).prop("disabled", mode).css("opacity", mode ? .3 : 1);
+            } else {
+                $(this).prop("disabled", ! mode).css("opacity", ! mode ? .3 : 1);
+            }
+        });
+        $selectGroups.trigger("change");
+    }
+}).trigger("change");
             {/jq}
         </div>
         <div class="mb-3 row mx-0" >



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

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