@bagelink/vue 0.0.884 → 0.0.886

package/dist/components/form/inputs/SelectInput.vue.d.ts

@@ -94,7 +94,7 @@ declare function __VLS_template(): {
             };
             $forceUpdate: () => void;
             $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (... /** @type { [typeof __VLS_components.Icon, ] } */args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
         } & Readonly<{}> & Omit<Readonly<{
             value?: string;
             thin?: boolean;
@@ -229,6 +229,7 @@ declare function __VLS_template(): {
             modelValue: string | number;
             debounceDelay: number;
         }> | null;
+        trigger: HTMLButtonElement;
         selectOptions: HTMLDivElement;
     };
     attrs: Partial<{}>;

package/dist/components/form/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAwaA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA+N/B,iBAAS,cAAc;;sBA4RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA9EzB,GAAG,8CACmB,GAAE,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAyFjF,OAAO,IAA6B;EAEjD;AAmCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxiBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAiiB/C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAobA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA2O/B,iBAAS,cAAc;;sBA8RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAzFrB,GAAG,8CACmB,GAAG,yBAAyB,GAC3D,CAAA,iDAAiD,6DAAd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAoGxB,OAAO,IAA6B;EAEjD;AAoCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxjBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAijB/C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -43998,6 +43998,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const searchPlaceholder = vue.computed(() => props2.searchPlaceholder || "Search");
     const searchInput = vue.ref();
+    const trigger = vue.ref();
     let selectedItems = vue.ref([]);
     const selectedItemCount = vue.computed(() => selectedItems.value.length ?? 0);
     let search = vue.ref("");
@@ -44040,6 +44041,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     let highlightedIndex = vue.ref(0);
     const selectOptions = vue.ref();
     function navigate(direction) {
+      console.log("navigate", direction);
       if (direction === "up") {
         highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
       } else if (direction === "down") {
@@ -44053,7 +44055,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     }
     const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
+      var _a2;
+      console.log("updateOpen", visible);
       open.value = visible;
+      if (open.value) {
+        (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      } else {
+        setTimeout(() => {
+          var _a3;
+          if (trigger.value) trigger.value.focus();
+          if (searchInput.value) searchInput.value.focus();
+          (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
+        }, 10);
+      }
       if (!open.value) {
         if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
           selectedItems.value = [];
@@ -44063,12 +44077,12 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         }
         highlightedIndex.value = -1;
         search.value = "";
-      } else {
-        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
+      } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
+        search.value = selectedLabel.value;
         setTimeout(
           () => {
-            var _a2, _b, _c;
-            return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+            var _a3, _b, _c;
+            return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
           100
         );
@@ -44161,7 +44175,6 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        noAutoFocus: "",
         onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
       }, {
         trigger: vue.withCtx(() => [
@@ -44186,11 +44199,13 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 ]
               }, null, 8, ["modelValue", "placeholder"])) : (vue.openBlock(), vue.createElementBlock("button", {
                 key: 1,
+                ref_key: "trigger",
+                ref: trigger,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: vue.normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onFocus: openOptions,
-                onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
+                onClick: _cache[6] || (_cache[6] = vue.withModifiers(($event) => updateOpen(true), ["stop"]))
               }, [
                 _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                   key: 0,
@@ -44284,7 +44299,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license

package/dist/index.mjs

@@ -43996,6 +43996,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const searchPlaceholder = computed(() => props2.searchPlaceholder || "Search");
     const searchInput = ref();
+    const trigger = ref();
     let selectedItems = ref([]);
     const selectedItemCount = computed(() => selectedItems.value.length ?? 0);
     let search = ref("");
@@ -44038,6 +44039,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     let highlightedIndex = ref(0);
     const selectOptions = ref();
     function navigate(direction) {
+      console.log("navigate", direction);
       if (direction === "up") {
         highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
       } else if (direction === "down") {
@@ -44051,7 +44053,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
+      var _a2;
+      console.log("updateOpen", visible);
       open.value = visible;
+      if (open.value) {
+        (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      } else {
+        setTimeout(() => {
+          var _a3;
+          if (trigger.value) trigger.value.focus();
+          if (searchInput.value) searchInput.value.focus();
+          (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
+        }, 10);
+      }
       if (!open.value) {
         if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
           selectedItems.value = [];
@@ -44061,12 +44075,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         }
         highlightedIndex.value = -1;
         search.value = "";
-      } else {
-        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
+      } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
+        search.value = selectedLabel.value;
         setTimeout(
           () => {
-            var _a2, _b, _c;
-            return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+            var _a3, _b, _c;
+            return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
           100
         );
@@ -44159,7 +44173,6 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        noAutoFocus: "",
         onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
       }, {
         trigger: withCtx(() => [
@@ -44184,11 +44197,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 ]
               }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
                 key: 1,
+                ref_key: "trigger",
+                ref: trigger,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onFocus: openOptions,
-                onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
+                onClick: _cache[6] || (_cache[6] = withModifiers(($event) => updateOpen(true), ["stop"]))
               }, [
                 _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
                   key: 0,
@@ -44282,7 +44297,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license

package/dist/style.css

@@ -1316,10 +1316,10 @@ p {
 } */
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-0ea75792] {
+.selectinput[data-v-973e8b39] {
 	width: 100%;
 }
-.selectinput-option[data-v-0ea75792] {
+.selectinput-option[data-v-973e8b39] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1331,23 +1331,23 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-0ea75792]{
+.selectinput-option .bgl_icon-font[data-v-973e8b39]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-0ea75792] {
+.selectinput-options.multiselect .selectinput-option[data-v-973e8b39] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-0ea75792] {
+.selectinput-options[data-v-973e8b39] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-0ea75792]:hover, .highlight[data-v-0ea75792] {
+.selectinput-option[data-v-973e8b39]:hover, .highlight[data-v-973e8b39] {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-0ea75792] {
+.isEmpty p[data-v-973e8b39] {
 	opacity: 0.3;
 }
-.selected[data-v-0ea75792]{
+.selected[data-v-973e8b39]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.884",
+  "version": "0.0.886",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/SelectInput.vue

@@ -35,6 +35,7 @@ const emit = defineEmits(['update:modelValue']) // Add 'search' event
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
 const searchInput = $ref<HTMLInputElement | undefined>()
+const trigger = $ref<HTMLButtonElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
 
@@ -97,6 +98,7 @@ let highlightedIndex = $ref(0)
 const selectOptions = $ref<HTMLElement | undefined>()
 
 function navigate(direction: 'up' | 'down') {
+	console.log('navigate', direction)
 	if (direction === 'up') {
 		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : filteredOptions.length - 1
 	} else if (direction === 'down') {
@@ -111,7 +113,17 @@ function navigate(direction: 'up' | 'down') {
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
 function updateOpen(visible: boolean) {
+	console.log('updateOpen', visible)
 	open = visible
+
+	if (open) { dropdown?.show() }
+	else {
+		setTimeout(() => {
+			if (trigger) trigger.focus()
+			if (searchInput) searchInput.focus()
+			dropdown?.hide()
+		}, 10)
+	}
 	if (!open) {
 		if (props.searchable && !props.multiselect && !search && !selected) { selectedItems = []
 		}
@@ -121,8 +133,8 @@ function updateOpen(visible: boolean) {
 		highlightedIndex = -1
 		search = ''
 	}
-	else {
-		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
+	else if (props.searchable && !props.multiselect && selectedItemCount) {
+		search = selectedLabel as string
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
 			100,
@@ -231,7 +243,6 @@ onMounted(() => {
 		ref="dropdown"
 		placement="bottom-start"
 		class="bagel-input selectinput"
-		noAutoFocus
 		@hide="updateOpen(false)"
 	>
 		<template #trigger>
@@ -253,12 +264,13 @@ onMounted(() => {
 					/>
 					<button
 						v-else
+						ref="trigger"
 						:disabled="disabled"
 						type="button"
 						class="selectinput-btn"
 						:class="{ isEmpty: selectedItemCount === 0 }"
 						@focus="openOptions"
-						@click="updateOpen(true)"
+						@click.stop="updateOpen(true)"
 					>
 						<Icon v-if="icon" :icon="icon" />
 						<p v-if="!hideLabel">