@ouestfrance/sipa-bms-ui 8.5.3 → 8.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,9 +36,9 @@
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.4",
-    "@storybook/addon-links": "9.1.4",
-    "@storybook/vue3-vite": "9.1.4",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/addon-links": "9.1.5",
+    "@storybook/vue3-vite": "9.1.5",
     "@types/lodash": "4.17.20",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-vue": "6.0.1",
@@ -64,11 +64,11 @@
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.92.0",
+    "sass": "1.92.1",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "2.0.13",
-    "storybook": "9.1.4",
-    "storybook-addon-pseudo-states": "9.1.4",
+    "start-server-and-test": "2.1.0",
+    "storybook": "9.1.5",
+    "storybook-addon-pseudo-states": "9.1.5",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "11.1.0",

package/src/components/form/BmsSelect.vue

@@ -83,6 +83,7 @@ const displayValue = computed(() => {
 
 const selectItem = (option: any) => {
   modelValue.value = option.value;
+  setFocus();
   open.value = false;
 };
 

package/src/components/form/RawAutocomplete.vue

@@ -10,7 +10,6 @@
       :required="required"
       :small="small"
       @input="onInput"
-      v-model:focus="isInputFocused"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
@@ -20,12 +19,8 @@
           <span v-if="inputText.length" class="icon" @click="clearInput">
             <X />
           </span>
-          <span
-            v-else
-            class="icon"
-            @click.stop="isInputFocused = !isInputFocused"
-          >
-            <ChevronDown v-if="!isInputFocused" />
+          <span v-else class="icon" @click.stop="toggleList">
+            <ChevronDown v-if="!showDataList" />
             <ChevronUp v-else />
           </span>
         </slot>
@@ -33,9 +28,9 @@
     </RawInputText>
     <template #datalist>
       <FieldDatalist
-        v-show="isInputFocused"
+        v-show="showDataList"
         data-testid="autocomplete-menu"
-        :is-input-focused="isInputFocused"
+        :is-input-focused="showDataList"
         :can-add-new-option="canAddNewOption"
         :new-option="inputText"
         :options="filteredMenuItems"
@@ -90,7 +85,7 @@ const getValidOptionByValue = (value: string | null) =>
 const inputText = ref<string>(
   getValidOptionByValue(modelValue.value)?.label ?? '',
 );
-const isInputFocused = ref<boolean>(props.open);
+const showDataList = ref<boolean>(props.open);
 const autocompleteInput: Ref<HTMLElement | null> = ref(null);
 
 const classes = computed(() => {
@@ -106,7 +101,8 @@ const selectItem = (option: InputOption) => {
   const existingOption =
     getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
   modelValue.value = existingOption?.value ?? null;
-  isInputFocused.value = false;
+  showDataList.value = false;
+  setFocus();
 };
 
 const displayItem = (option: InputOption) => {
@@ -136,7 +132,7 @@ watch(
   },
 );
 const onInput = () => {
-  isInputFocused.value = true;
+  showDataList.value = true;
   if (inputText.value === '') {
     clearInput();
   }
@@ -144,14 +140,19 @@ const onInput = () => {
 
 const setFocus = () => {
   if (autocompleteInput.value) {
-    autocompleteInput.value.focus();
+    (autocompleteInput.value as any).setFocus();
   }
 };
+
 const clearInput = () => {
   inputText.value = '';
   modelValue.value = null;
+  setFocus();
+};
+const toggleList = () => {
+  showDataList.value = !showDataList.value;
+  setFocus();
 };
-
 defineExpose({
   setFocus,
 });