@sit-onyx/headless 1.0.0-alpha.8 → 1.0.0-alpha.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/comboBox/createComboBox.ts

@@ -54,8 +54,10 @@ export type CreateComboboxOptions<
   templateRef: Ref<HTMLElement | undefined>;
   /**
    * Hook when the popover should toggle.
+   *
+   * @param preventFocus If `true`, the parent combobox should not be focused (e.g. on outside click).
    */
-  onToggle?: () => void;
+  onToggle?: (preventFocus?: boolean) => void;
   /**
    * Hook when an option is (un-)selected.
    */
@@ -217,7 +219,7 @@ export const createComboBox = createBuilder(
       queryComponent: () => templateRef.value,
       onOutsideClick() {
         if (!isExpanded.value) return;
-        onToggle?.();
+        onToggle?.(true);
       },
     });
 
@@ -231,6 +233,8 @@ export const createComboBox = createBuilder(
         listbox: computed(() => ({
           ...listbox.value,
           id: controlsId,
+          // preventDefault to not lose focus of the combobox
+          onMousedown: (e) => e.preventDefault(),
         })),
         /**
          * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
@@ -253,7 +257,7 @@ export const createComboBox = createBuilder(
          */
         button: computed(() => ({
           tabindex: "-1",
-          onClick: onToggle,
+          onClick: () => onToggle?.(),
         })),
       },
     };