@yamada-ui/autocomplete 0.1.8 → 0.1.10

package/dist/autocomplete-create.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteCreate
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteCreate
 };

package/dist/autocomplete-empty.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteEmpty
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteEmpty
 };

package/dist/autocomplete-icon.mjs

@@ -2,7 +2,7 @@ import {
   AutocompleteClearIcon,
   AutocompleteIcon,
   AutocompleteItemIcon
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteClearIcon,
   AutocompleteIcon,

package/dist/autocomplete-list.js

@@ -58,6 +58,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/autocomplete-list.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteList
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteList
 };

package/dist/autocomplete-option-group.d.ts

@@ -1,6 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
-import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-42515ffb.js';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-4995431c.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@yamada-ui/form-control';

package/dist/autocomplete-option-group.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteOptionGroup
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteOptionGroup
 };

package/dist/autocomplete-option.d.ts

@@ -1,6 +1,6 @@
 import '@yamada-ui/core';
 import 'react';
-export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-42515ffb.js';
+export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';

package/dist/autocomplete-option.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteOption
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteOption
 };

package/dist/autocomplete.d.ts

@@ -2,7 +2,7 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
 import { AutocompleteIconProps } from './autocomplete-icon.js';
 import { AutocompleteListProps } from './autocomplete-list.js';
-import { b as UseAutocompleteProps } from './use-autocomplete-42515ffb.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';

package/dist/autocomplete.js

@@ -343,20 +343,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils6.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -395,7 +395,7 @@ var useAutocomplete = ({
   const { id } = rest;
   const formControlProps = (0, import_utils6.pickObject)(rest, import_form_control.formControlProperties);
   const [containerProps, inputProps] = (0, import_utils6.splitObject)(
-    (0, import_utils6.omitObject)(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    (0, import_utils6.omitObject)(rest, ["id", "value", "defaultValue", "onChange", "month", "onChangeMonth"]),
     import_core6.layoutStylesProperties
   );
   const descendants = useAutocompleteDescendants();
@@ -404,7 +404,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -422,7 +422,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   if (createOption && !(0, import_utils6.isUndefined)(children)) {
     console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -436,7 +436,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils6.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -700,20 +700,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils6.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -721,13 +721,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -742,10 +742,8 @@ var useAutocomplete = ({
       setDisplayValue(void 0);
       setInputValue("");
       rebirthOptions();
-      if (inputRef.current)
-        inputRef.current.focus();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+    [setDisplayValue, setInputValue, setValue, rebirthOptions]
   );
   const onClick = (0, import_react.useCallback)(() => {
     if (isOpen) {
@@ -877,10 +875,9 @@ var useAutocomplete = ({
       ...props,
       ...formControlProps,
       onClick: (0, import_utils6.handlerAll)(props.onClick, rest.onClick, onClick),
-      onFocus: (0, import_utils6.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onBlur: (0, import_utils6.handlerAll)(props.onBlur, rest.onBlur, onBlur)
     }),
-    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+    [containerProps, formControlProps, onBlur, onClick, rest]
   );
   const getFieldProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
@@ -891,9 +888,10 @@ var useAutocomplete = ({
       placeholder,
       "data-active": (0, import_utils6.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils6.dataAttr)(isOpen),
+      onFocus: (0, import_utils6.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onKeyDown: (0, import_utils6.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
     }),
-    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+    [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown]
   );
   return {
     id,
@@ -1002,6 +1000,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;
@@ -1430,8 +1430,7 @@ var AutocompleteField = (0, import_core8.forwardRef)(
         display: "inline-block",
         w: "full",
         placeholder,
-        ...getInputProps(inputProps, ref),
-        value: inputValue || displayValue || ""
+        ...getInputProps({ ...inputProps, value: inputValue || displayValue || "" }, ref)
       }
     ) }) });
   }

package/dist/autocomplete.mjs

@@ -1,6 +1,6 @@
 import {
   Autocomplete
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   Autocomplete
 };

package/dist/{chunk-MG2KF34Q.mjs → chunk-YQULJUTP.mjs}

@@ -222,8 +222,7 @@ var AutocompleteField = forwardRef2(
         display: "inline-block",
         w: "full",
         placeholder,
-        ...getInputProps(inputProps, ref),
-        value: inputValue || displayValue || ""
+        ...getInputProps({ ...inputProps, value: inputValue || displayValue || "" }, ref)
       }
     ) }) });
   }
@@ -584,8 +583,7 @@ var MultiAutocompleteField = forwardRef7(
               marginBlockStart: "0.125rem",
               marginBlockEnd: "0.125rem",
               placeholder: !displayValue || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps(inputProps, ref),
-              value: inputValue
+              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
             }
           )
         ]
@@ -694,20 +692,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = isArray(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -746,7 +744,7 @@ var useAutocomplete = ({
   const { id } = rest;
   const formControlProps = pickObject(rest, formControlProperties);
   const [containerProps, inputProps] = splitObject(
-    omitObject(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    omitObject(rest, ["id", "value", "defaultValue", "onChange", "month", "onChangeMonth"]),
     layoutStylesProperties
   );
   const descendants = useAutocompleteDescendants();
@@ -755,7 +753,7 @@ var useAutocomplete = ({
   const inputRef = useRef2(null);
   const timeoutIds = useRef2(/* @__PURE__ */ new Set([]));
   const isComposition = useRef2(false);
-  const [data, setData] = useState(rest.data);
+  const [options, setOptions] = useState(rest.options);
   const [value, setValue] = useControllableState({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -773,7 +771,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   if (createOption && !isUndefined(children)) {
     console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -787,7 +785,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = getValidChildren2(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!isArray(value2)) {
       return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -1051,20 +1049,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && isArray(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && isArray(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -1072,13 +1070,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = useCallback(() => {
     if (!isMulti) {
       onChange("");
@@ -1093,10 +1091,8 @@ var useAutocomplete = ({
       setDisplayValue(void 0);
       setInputValue("");
       rebirthOptions();
-      if (inputRef.current)
-        inputRef.current.focus();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+    [setDisplayValue, setInputValue, setValue, rebirthOptions]
   );
   const onClick = useCallback(() => {
     if (isOpen) {
@@ -1228,10 +1224,9 @@ var useAutocomplete = ({
       ...props,
       ...formControlProps,
       onClick: handlerAll2(props.onClick, rest.onClick, onClick),
-      onFocus: handlerAll2(props.onFocus, rest.onFocus, onFocus),
       onBlur: handlerAll2(props.onBlur, rest.onBlur, onBlur)
     }),
-    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+    [containerProps, formControlProps, onBlur, onClick, rest]
   );
   const getFieldProps = useCallback(
     (props = {}, ref = null) => ({
@@ -1242,9 +1237,10 @@ var useAutocomplete = ({
       placeholder,
       "data-active": dataAttr(isOpen),
       "aria-expanded": dataAttr(isOpen),
+      onFocus: handlerAll2(props.onFocus, rest.onFocus, onFocus),
       onKeyDown: handlerAll2(props.onKeyDown, rest.onKeyDown, onKeyDown)
     }),
-    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+    [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown]
   );
   return {
     id,
@@ -1353,6 +1349,8 @@ var useAutocompleteList = () => {
   useEffect(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Autocomplete, AutocompleteProps } from './autocomplete.js';
 export { AutocompleteOptionGroup, AutocompleteOptionGroupProps } from './autocomplete-option-group.js';
-export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-42515ffb.js';
+export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.js';
 export { AutocompleteCreate, AutocompleteCreateProps } from './autocomplete-create.js';
 export { AutocompleteEmpty, AutocompleteEmptyProps } from './autocomplete-empty.js';
 export { MultiAutocomplete, MultiAutocompleteProps } from './multi-autocomplete.js';

package/dist/index.js

@@ -148,20 +148,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -200,7 +200,7 @@ var useAutocomplete = ({
   const { id } = rest;
   const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
   const [containerProps, inputProps] = (0, import_utils.splitObject)(
-    (0, import_utils.omitObject)(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    (0, import_utils.omitObject)(rest, ["id", "value", "defaultValue", "onChange", "month", "onChangeMonth"]),
     import_core.layoutStylesProperties
   );
   const descendants = useAutocompleteDescendants();
@@ -209,7 +209,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -227,7 +227,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   if (createOption && !(0, import_utils.isUndefined)(children)) {
     console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -241,7 +241,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -505,20 +505,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -526,13 +526,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -547,10 +547,8 @@ var useAutocomplete = ({
       setDisplayValue(void 0);
       setInputValue("");
       rebirthOptions();
-      if (inputRef.current)
-        inputRef.current.focus();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+    [setDisplayValue, setInputValue, setValue, rebirthOptions]
   );
   const onClick = (0, import_react.useCallback)(() => {
     if (isOpen) {
@@ -682,10 +680,9 @@ var useAutocomplete = ({
       ...props,
       ...formControlProps,
       onClick: (0, import_utils.handlerAll)(props.onClick, rest.onClick, onClick),
-      onFocus: (0, import_utils.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onBlur: (0, import_utils.handlerAll)(props.onBlur, rest.onBlur, onBlur)
     }),
-    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+    [containerProps, formControlProps, onBlur, onClick, rest]
   );
   const getFieldProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
@@ -696,9 +693,10 @@ var useAutocomplete = ({
       placeholder,
       "data-active": (0, import_utils.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils.dataAttr)(isOpen),
+      onFocus: (0, import_utils.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
     }),
-    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+    [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown]
   );
   return {
     id,
@@ -807,6 +805,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;
@@ -1284,8 +1284,7 @@ var AutocompleteField = (0, import_core4.forwardRef)(
         display: "inline-block",
         w: "full",
         placeholder,
-        ...getInputProps(inputProps, ref),
-        value: inputValue || displayValue || ""
+        ...getInputProps({ ...inputProps, value: inputValue || displayValue || "" }, ref)
       }
     ) }) });
   }
@@ -1641,8 +1640,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
               marginBlockStart: "0.125rem",
               marginBlockEnd: "0.125rem",
               placeholder: !displayValue || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps(inputProps, ref),
-              value: inputValue
+              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
             }
           )
         ]

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   AutocompleteOption,
   AutocompleteOptionGroup,
   MultiAutocomplete
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   Autocomplete,
   AutocompleteCreate,

package/dist/multi-autocomplete.d.ts

@@ -3,7 +3,7 @@ import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
 import { FC, MouseEventHandler } from 'react';
 import { AutocompleteIconProps } from './autocomplete-icon.js';
 import { AutocompleteListProps } from './autocomplete-list.js';
-import { b as UseAutocompleteProps } from './use-autocomplete-42515ffb.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';

package/dist/multi-autocomplete.js

@@ -344,20 +344,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils6.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -396,7 +396,7 @@ var useAutocomplete = ({
   const { id } = rest;
   const formControlProps = (0, import_utils6.pickObject)(rest, import_form_control.formControlProperties);
   const [containerProps, inputProps] = (0, import_utils6.splitObject)(
-    (0, import_utils6.omitObject)(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    (0, import_utils6.omitObject)(rest, ["id", "value", "defaultValue", "onChange", "month", "onChangeMonth"]),
     import_core6.layoutStylesProperties
   );
   const descendants = useAutocompleteDescendants();
@@ -405,7 +405,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -423,7 +423,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   if (createOption && !(0, import_utils6.isUndefined)(children)) {
     console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -437,7 +437,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils6.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -701,20 +701,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils6.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -722,13 +722,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -743,10 +743,8 @@ var useAutocomplete = ({
       setDisplayValue(void 0);
       setInputValue("");
       rebirthOptions();
-      if (inputRef.current)
-        inputRef.current.focus();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+    [setDisplayValue, setInputValue, setValue, rebirthOptions]
   );
   const onClick = (0, import_react.useCallback)(() => {
     if (isOpen) {
@@ -878,10 +876,9 @@ var useAutocomplete = ({
       ...props,
       ...formControlProps,
       onClick: (0, import_utils6.handlerAll)(props.onClick, rest.onClick, onClick),
-      onFocus: (0, import_utils6.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onBlur: (0, import_utils6.handlerAll)(props.onBlur, rest.onBlur, onBlur)
     }),
-    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+    [containerProps, formControlProps, onBlur, onClick, rest]
   );
   const getFieldProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
@@ -892,9 +889,10 @@ var useAutocomplete = ({
       placeholder,
       "data-active": (0, import_utils6.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils6.dataAttr)(isOpen),
+      onFocus: (0, import_utils6.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onKeyDown: (0, import_utils6.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
     }),
-    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+    [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown]
   );
   return {
     id,
@@ -1003,6 +1001,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;
@@ -1535,8 +1535,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
               marginBlockStart: "0.125rem",
               marginBlockEnd: "0.125rem",
               placeholder: !displayValue || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps(inputProps, ref),
-              value: inputValue
+              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
             }
           )
         ]

package/dist/multi-autocomplete.mjs

@@ -1,6 +1,6 @@
 import {
   MultiAutocomplete
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   MultiAutocomplete
 };

package/dist/{use-autocomplete-42515ffb.d.ts → use-autocomplete-4995431c.d.ts}

@@ -3363,7 +3363,7 @@ type UseAutocompleteBaseProps<T extends MaybeValue = string> = Omit<PopoverProps
     omitSelectedValues?: boolean;
     maxSelectedValues?: number;
     optionProps?: Omit<AutocompleteOptionProps, 'value' | 'children'>;
-    data?: UIOption[];
+    options?: UIOption[];
 };
 type UseAutocompleteProps<T extends MaybeValue = string> = Omit<HTMLUIProps<'input'>, keyof UseAutocompleteBaseProps | 'list' | 'disabled' | 'required' | 'readOnly' | 'size'> & UseAutocompleteBaseProps<T>;
 declare const useAutocomplete: <T extends MaybeValue = string>({ defaultIsOpen, closeOnSelect, omitSelectedValues, maxSelectedValues, closeOnBlur, closeOnEsc, createOption, createOrder, createSecondOrder, emptyMessage, format, placement, duration, optionProps, placeholder, children, ...rest }: UseAutocompleteProps<T>) => {
@@ -4004,7 +4004,7 @@ declare const useAutocomplete: <T extends MaybeValue = string>({ defaultIsOpen,
     getPopoverProps: (props?: PopoverProps) => PopoverProps;
     getContainerProps: PropGetter;
     getFieldProps: PropGetter;
-    inputProps: Omit<Omit<Dict, "value" | "id" | "onChange" | "month" | "onChangeMonth">, any>;
+    inputProps: Omit<Omit<Dict, "value" | "defaultValue" | "id" | "onChange" | "month" | "onChangeMonth">, any>;
 };
 type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
 declare const useAutocompleteInput: () => {

package/dist/use-autocomplete.d.ts

@@ -5,4 +5,4 @@ import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/select';
 import '@yamada-ui/utils';
-export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, M as MaybeValue, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-42515ffb.js';
+export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, M as MaybeValue, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-4995431c.js';

package/dist/use-autocomplete.js

@@ -288,20 +288,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils4.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -340,7 +340,7 @@ var useAutocomplete = ({
   const { id } = rest;
   const formControlProps = (0, import_utils4.pickObject)(rest, import_form_control.formControlProperties);
   const [containerProps, inputProps] = (0, import_utils4.splitObject)(
-    (0, import_utils4.omitObject)(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    (0, import_utils4.omitObject)(rest, ["id", "value", "defaultValue", "onChange", "month", "onChangeMonth"]),
     import_core4.layoutStylesProperties
   );
   const descendants = useAutocompleteDescendants();
@@ -349,7 +349,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react2.useRef)(null);
   const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react2.useRef)(false);
-  const [data, setData] = (0, import_react2.useState)(rest.data);
+  const [options, setOptions] = (0, import_react2.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -367,7 +367,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   if (createOption && !(0, import_utils4.isUndefined)(children)) {
     console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -381,7 +381,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils4.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils4.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -645,20 +645,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils4.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils4.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -666,13 +666,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react2.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -687,10 +687,8 @@ var useAutocomplete = ({
       setDisplayValue(void 0);
       setInputValue("");
       rebirthOptions();
-      if (inputRef.current)
-        inputRef.current.focus();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+    [setDisplayValue, setInputValue, setValue, rebirthOptions]
   );
   const onClick = (0, import_react2.useCallback)(() => {
     if (isOpen) {
@@ -822,10 +820,9 @@ var useAutocomplete = ({
       ...props,
       ...formControlProps,
       onClick: (0, import_utils4.handlerAll)(props.onClick, rest.onClick, onClick),
-      onFocus: (0, import_utils4.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onBlur: (0, import_utils4.handlerAll)(props.onBlur, rest.onBlur, onBlur)
     }),
-    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+    [containerProps, formControlProps, onBlur, onClick, rest]
   );
   const getFieldProps = (0, import_react2.useCallback)(
     (props = {}, ref = null) => ({
@@ -836,9 +833,10 @@ var useAutocomplete = ({
       placeholder,
       "data-active": (0, import_utils4.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils4.dataAttr)(isOpen),
+      onFocus: (0, import_utils4.handlerAll)(props.onFocus, rest.onFocus, onFocus),
       onKeyDown: (0, import_utils4.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
     }),
-    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+    [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown]
   );
   return {
     id,
@@ -947,6 +945,8 @@ var useAutocompleteList = () => {
   (0, import_react2.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/use-autocomplete.mjs

@@ -12,7 +12,7 @@ import {
   useAutocompleteList,
   useAutocompleteOption,
   useAutocompleteOptionGroup
-} from "./chunk-MG2KF34Q.mjs";
+} from "./chunk-YQULJUTP.mjs";
 export {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/autocomplete",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Yamada UI autocomplete component",
   "keywords": [
     "yamada",
@@ -36,16 +36,16 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.2.1",
+    "@yamada-ui/core": "0.2.2",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/icon": "0.1.8",
-    "@yamada-ui/select": "0.1.8",
-    "@yamada-ui/form-control": "0.1.8",
-    "@yamada-ui/popover": "0.1.8",
+    "@yamada-ui/icon": "0.1.9",
+    "@yamada-ui/select": "0.1.10",
+    "@yamada-ui/form-control": "0.1.9",
+    "@yamada-ui/popover": "0.1.9",
     "@yamada-ui/use-descendant": "0.1.1",
     "@yamada-ui/use-clickable": "0.1.1",
     "@yamada-ui/use-outside-click": "0.1.1",
-    "@yamada-ui/use-controllable-state": "0.1.1"
+    "@yamada-ui/use-controllable-state": "0.1.2"
   },
   "devDependencies": {
     "react": "^18.0.0",