adminforth 3.24.0 → 3.24.2

package/dist/spa/src/afcl/Select.vue

@@ -14,7 +14,18 @@
         placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText text-base sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropdownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
         dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         :class="[{'cursor-pointer': searchDisabled}, classesForInput]"
-        autocomplete="off" data-custom="no-autofill" name="afcl-select-input" id="afcl-select-input"
+        :id="inputId"
+        :name="inputId"
+        autocomplete="new-password"
+        data-1p-ignore
+        data-lpignore="true"
+        data-bwignore
+        data-form-type="other"
+        role="combobox"
+        aria-haspopup="listbox"
+        :aria-expanded="showDropdown"
+        :aria-controls="dropdownId"
+        :aria-autocomplete="searchDisabled ? 'none' : 'list'"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
         "
@@ -38,13 +49,15 @@
       </div>
     </div>
     <teleport to="body" v-if="(teleportToBody  || teleportToTop) && showDropdown">
-      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-30': teleportToBody, 'z-[1000]': teleportToTop}"
+      <div ref="dropdownEl" :id="dropdownId" role="listbox" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-30': teleportToBody, 'z-[1000]': teleportToTop}"
         class="fixed w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
           dark:border-gray-600 rounded-default py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
         @scroll="handleDropdownScroll">
         <div
           v-for="item in filteredItems"
           :key="item.value"
+          role="option"
+          :aria-selected="selectedItems.includes(item)"
           class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
           :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
           @click="toogleItem(item)"
@@ -62,13 +75,15 @@
       </div>
     </teleport>
 
-    <div v-if="!teleportToBody && !teleportToTop && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
+    <div v-if="!teleportToBody && !teleportToTop && showDropdown" ref="dropdownEl" :id="dropdownId" role="listbox" :style="dropdownStyle" :class="{'shadow-none': isTop}"
       class="afcl-select-content absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg text-lightDropdownButtonsText dark:shadow-black dark:bg-darkDropdownOptionsBackground
         dark:border-gray-600 rounded-default py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
         @scroll="handleDropdownScroll">
       <div
         v-for="item in filteredItems"
         :key="item.value"
+        role="option"
+        :aria-selected="selectedItems.includes(item)"
         class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
         :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
         @click="toogleItem(item)"
@@ -115,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, type Ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, useId,type PropType, type Ref } from 'vue';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
@@ -167,6 +182,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
 
+// Opaque per-instance id/name: Chromium classifies fields for profile autofill by name/id heuristics,
+// so a shared static name like "afcl-select-input" lets it treat every Select on the page as the same
+// field and fill it with e.g. the saved email. Paired with autocomplete="new-password" on the input,
+// which Chromium honours for suppressing profile autofill (plain autocomplete="off" is ignored).
+const uid = useId();
+const inputId = `afs-${uid}`;
+const dropdownId = `afs-list-${uid}`;
+
 const search = ref('');
 const showDropdown = ref(false);
 const inputEl = ref<HTMLElement | null>(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "3.24.0",
+  "version": "3.24.2",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",