@ouestfrance/sipa-bms-ui 8.5.3 → 8.5.4

package/dist/sipa-bms-ui.css

@@ -587,7 +587,7 @@ ul li[data-v-413e6742]:hover, ul li.selected[data-v-413e6742] {
   line-height: 1;
   width: 100%;
   background-color: transparent;
-}.field__input .autocomplete-wrapper[data-v-9b0bf4fb] {
+}.field__input .autocomplete-wrapper[data-v-5d665f68] {
   width: 100%;
   padding: 0.7em;
   margin: 0.5em 0;
@@ -596,22 +596,22 @@ ul li[data-v-413e6742]:hover, ul li.selected[data-v-413e6742] {
   background-color: var(--input-background-color);
   height: 48px;
 }
-.field__input .autocomplete-wrapper[data-v-9b0bf4fb]:hover {
+.field__input .autocomplete-wrapper[data-v-5d665f68]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input .autocomplete-wrapper[data-v-9b0bf4fb]:has(input:focus) {
+.field__input .autocomplete-wrapper[data-v-5d665f68]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input .autocomplete-wrapper.is-error[data-v-9b0bf4fb] {
+.field__input .autocomplete-wrapper.is-error[data-v-5d665f68] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.field__input .autocomplete-wrapper.is-disabled[data-v-9b0bf4fb] {
+.field__input .autocomplete-wrapper.is-disabled[data-v-5d665f68] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
 }
-.field__input .autocomplete-wrapper input[data-v-9b0bf4fb] {
+.field__input .autocomplete-wrapper input[data-v-5d665f68] {
   outline: none;
   appearance: none;
   border: 0;
@@ -624,7 +624,7 @@ ul li[data-v-413e6742]:hover, ul li.selected[data-v-413e6742] {
   width: 100%;
   background-color: transparent;
 }
-.icon[data-v-9b0bf4fb] {
+.icon[data-v-5d665f68] {
   height: 1em;
   width: 1em;
   cursor: pointer;
@@ -1080,12 +1080,12 @@ input[type=radio][data-v-cb26402d]:checked::before {
 }
 .input-toggle[data-v-9570e0a9]:hover {
   cursor: var(--cursor);
-}.field__input[data-v-3898a72d] {
+}.field__input[data-v-6e3f7aab] {
   --field-border-color: var(--bms-grey-50);
   --field-border-color-active: var(--bms-main-100);
   --input-background-color: var(--bms-white);
 }
-.field__input .select-wrapper[data-v-3898a72d] {
+.field__input .select-wrapper[data-v-6e3f7aab] {
   width: 100%;
   padding: 0 0 0 1em;
   border-radius: var(--bms-border-radius);
@@ -1096,35 +1096,35 @@ input[type=radio][data-v-cb26402d]:checked::before {
   align-items: center;
   justify-content: space-between;
 }
-.field__input .select-wrapper .icon-down-container[data-v-3898a72d] {
+.field__input .select-wrapper .icon-down-container[data-v-6e3f7aab] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.field__input .select-wrapper .icon-down-container[data-v-3898a72d]:hover {
+.field__input .select-wrapper .icon-down-container[data-v-6e3f7aab]:hover {
   cursor: pointer;
 }
-.field__input .select-wrapper .icon-down-button[data-v-3898a72d] {
+.field__input .select-wrapper .icon-down-button[data-v-6e3f7aab] {
   width: 1em;
   margin: 0 var(--field-padding);
   display: block;
 }
-.field__input .select-wrapper[data-v-3898a72d]:hover {
+.field__input .select-wrapper[data-v-6e3f7aab]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input .select-wrapper[data-v-3898a72d]:has(input:focus) {
+.field__input .select-wrapper[data-v-6e3f7aab]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input .select-wrapper.is-error[data-v-3898a72d] {
+.field__input .select-wrapper.is-error[data-v-6e3f7aab] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.field__input .select-wrapper.is-disabled[data-v-3898a72d] {
+.field__input .select-wrapper.is-disabled[data-v-6e3f7aab] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
 }
-.field__input .select-wrapper input[data-v-3898a72d] {
+.field__input .select-wrapper input[data-v-6e3f7aab] {
   border: none;
   background-color: transparent;
   caret-color: transparent;

package/dist/sipa-bms-ui.es.js

@@ -38069,7 +38069,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     const inputText = ref(
       getValidOptionByValue(modelValue.value)?.label ?? ""
     );
-    const isInputFocused = ref(props.open);
+    const showDataList = ref(props.open);
     const autocompleteInput = ref(null);
     const classes = computed(() => {
       return { "is-error": props.errors?.length, "is-disabled": props.disabled };
@@ -38081,7 +38081,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
       emits("select", option);
       const existingOption = getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
       modelValue.value = existingOption?.value ?? null;
-      isInputFocused.value = false;
+      showDataList.value = false;
+      setFocus();
     };
     const displayItem = (option) => {
       const existingOption = getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
@@ -38106,19 +38107,24 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
       }
     );
     const onInput = () => {
-      isInputFocused.value = true;
+      showDataList.value = true;
       if (inputText.value === "") {
         clearInput();
       }
     };
     const setFocus = () => {
       if (autocompleteInput.value) {
-        autocompleteInput.value.focus();
+        autocompleteInput.value.setFocus();
       }
     };
     const clearInput = () => {
       inputText.value = "";
       modelValue.value = null;
+      setFocus();
+    };
+    const toggleList = () => {
+      showDataList.value = !showDataList.value;
+      setFocus();
     };
     __expose({
       setFocus
@@ -38129,13 +38135,13 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
         datalist: withCtx(() => [
           withDirectives(createVNode(FieldDatalist, {
             "data-testid": "autocomplete-menu",
-            "is-input-focused": isInputFocused.value,
+            "is-input-focused": showDataList.value,
             "can-add-new-option": _ctx.canAddNewOption,
             "new-option": inputText.value,
             options: filteredMenuItems.value,
             small: _ctx.small,
             onSelect: selectItem,
-            onAddNewOption: _cache[3] || (_cache[3] = (option) => emits("addNewOption", option))
+            onAddNewOption: _cache[1] || (_cache[1] = (option) => emits("addNewOption", option))
           }, {
             option: withCtx(({ option }) => [
               renderSlot(_ctx.$slots, "option", { option }, () => [
@@ -38144,7 +38150,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["is-input-focused", "can-add-new-option", "new-option", "options", "small"]), [
-            [vShow, isInputFocused.value]
+            [vShow, showDataList.value]
           ])
         ]),
         default: withCtx(() => [
@@ -38152,16 +38158,14 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
             ref_key: "autocompleteInput",
             ref: autocompleteInput,
             modelValue: inputText.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputText.value = $event),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
             type: unref(InputType).TEXT,
             disabled: _ctx.disabled,
             class: normalizeClass(classes.value),
             placeholder: _ctx.placeholder,
             required: _ctx.required,
             small: _ctx.small,
-            onInput,
-            focus: isInputFocused.value,
-            "onUpdate:focus": _cache[2] || (_cache[2] = ($event) => isInputFocused.value = $event)
+            onInput
           }, {
             "icon-start": withCtx(() => [
               renderSlot(_ctx.$slots, "icon-start", {}, void 0, true)
@@ -38177,14 +38181,14 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
                 ])) : (openBlock(), createElementBlock("span", {
                   key: 1,
                   class: "icon",
-                  onClick: _cache[0] || (_cache[0] = withModifiers(($event) => isInputFocused.value = !isInputFocused.value, ["stop"]))
+                  onClick: withModifiers(toggleList, ["stop"])
                 }, [
-                  !isInputFocused.value ? (openBlock(), createBlock(unref(ChevronDown), { key: 0 })) : (openBlock(), createBlock(unref(ChevronUp), { key: 1 }))
+                  !showDataList.value ? (openBlock(), createBlock(unref(ChevronDown), { key: 0 })) : (openBlock(), createBlock(unref(ChevronUp), { key: 1 }))
                 ]))
               ], true)
             ]),
             _: 3
-          }, 8, ["modelValue", "type", "disabled", "class", "placeholder", "required", "small", "focus"])
+          }, 8, ["modelValue", "type", "disabled", "class", "placeholder", "required", "small"])
         ]),
         _: 3
       }, 16);
@@ -38192,7 +38196,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const RawAutocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-9b0bf4fb"]]);
+const RawAutocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-5d665f68"]]);
 
 const _hoisted_1$N = ["innerHTML"];
 const _hoisted_2$v = ["innerHTML"];
@@ -85450,6 +85454,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     });
     const selectItem = (option) => {
       modelValue.value = option.value;
+      setFocus();
       open.value = false;
     };
     const setFocus = () => {
@@ -85508,7 +85513,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-3898a72d"]]);
+const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-6e3f7aab"]]);
 
 const _hoisted_1$E = { class: "dismiss-button" };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({