lecom-ui 5.3.70 → 5.3.71

package/dist/components/Combobox/Combobox.js

@@ -92,11 +92,14 @@ const ComboboxItemContent = ({
   const checkIconSize = CHECK_ICON_SIZES[size];
   const isDisabled = option.disabled || false;
   const textColor = isDisabled ? "text-grey-400" : "text-grey-800";
+  const isSelected = option.value === value;
   return /* @__PURE__ */ React.createElement(
     CommandItem,
     {
       key: option.value,
       onSelect: handleSelect,
+      "data-combobox-value": option.value,
+      tabIndex: isSelected ? 0 : -1,
       className: cn(
         comboboxItemVariants({
           size,
@@ -260,6 +263,7 @@ function Combobox({
 }) {
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
+  const commandListRef = React.useRef(null);
   const filteredOptions = React.useMemo(
     () => !search ? options : filterComboboxOptions(options, search),
     [options, search]
@@ -273,6 +277,19 @@ function Combobox({
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    if (!value) return;
+    requestAnimationFrame(() => {
+      const el = commandListRef.current?.querySelector(
+        `[data-combobox-value="${value}"]`
+      );
+      if (el) {
+        el.focus();
+        el.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }, [open, value]);
   React.useEffect(() => {
     if (!open) {
       setSearch("");
@@ -310,6 +327,7 @@ function Combobox({
     ), /* @__PURE__ */ React.createElement(
       CommandList,
       {
+        ref: commandListRef,
         key: search,
         className: cn(
           "max-h-44 overflow-y-auto overflow-x-hidden",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.3.70",
+  "version": "5.3.71",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",