Return input ref from main hook (#40)

szhsin · Jul 4, 2024 · f5ef6f3 · f5ef6f3
1 parent c952724
commit f5ef6f3
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 10 deletions.
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
@@ -18,13 +18,13 @@ const useAutocomplete = ({
   const [open, setOpen] = react.useState(false);
   const [focusItem, setFocusItem] = react.useState();
   const state = {
+    inputRef,
     focusItem,
     setFocusItem,
     open,
     setOpen
   };
   const contextual = {
-    inputRef,
     tmpValue,
     setTmpValue,
     value,

diff --git a/dist/esm/hooks/useAutocomplete.js b/dist/esm/hooks/useAutocomplete.js
@@ -12,13 +12,13 @@ const useAutocomplete = ({
   const [open, setOpen] = useState(false);
   const [focusItem, setFocusItem] = useState();
   const state = {
+    inputRef,
     focusItem,
     setFocusItem,
     open,
     setOpen
   };
   const contextual = {
-    inputRef,
     tmpValue,
     setTmpValue,
     value,

diff --git a/examples/pages/dropdown.tsx b/examples/pages/dropdown.tsx
@@ -37,7 +37,8 @@ export default function Dropdown() {
     getClearProps,
     clearable,
     open,
-    focusItem
+    focusItem,
+    inputRef
     // inlineComplete
   } = useCombobox({
     // traversal: linearTraversal({
@@ -69,9 +70,7 @@ export default function Dropdown() {
     })
   });
 
-  const inputProps = getInputProps();
-
-  const [maxHeight] = useAutoHeight({ anchorRef: inputProps.ref, show: open, margin: 30 });
+  const [maxHeight] = useAutoHeight({ anchorRef: inputRef, show: open, margin: 30 });
 
   return (
     <div className={styles.wrapper}>
@@ -124,7 +123,11 @@ export default function Dropdown() {
         }}
       >
         <div style={{ padding: 20 }}>
-          <input className={styles.input} {...inputProps} placeholder="Search a state..." />
+          <input
+            className={styles.input}
+            {...getInputProps()}
+            placeholder="Search a state..."
+          />
           {clearable && (
             <button
               className={styles.clearButton}

diff --git a/src/common.ts b/src/common.ts
@@ -22,6 +22,7 @@ export type GetPropsWithRefFunctions<T> = {
 };
 
 export interface AutocompleteState<T> {
+  inputRef: React.RefObject<HTMLInputElement>;
   focusItem: T | undefined;
   setFocusItem: (item?: T | undefined) => void;
   open: boolean;
@@ -54,7 +55,6 @@ export interface Contextual<T>
     AutocompleteState<T> {
   tmpValue?: string;
   setTmpValue: (value?: string | undefined) => void;
-  inputRef: React.RefObject<HTMLInputElement>;
 }
 
 export interface Clearable {

diff --git a/src/hooks/useAutocomplete.ts b/src/hooks/useAutocomplete.ts
@@ -14,14 +14,14 @@ const useAutocomplete = <T, FeatureYield extends object>({
   const [focusItem, setFocusItem] = useState<T | undefined>();
 
   const state: AutocompleteState<T> = {
+    inputRef,
     focusItem,
     setFocusItem,
     open,
     setOpen
   };
 
   const contextual = {
-    inputRef,
     tmpValue,
     setTmpValue,
     value,

diff --git a/types/common.d.ts b/types/common.d.ts
@@ -16,6 +16,7 @@ export type GetPropsWithRefFunctions<T> = {
     [P in keyof GetPropsFunctions<T>]: GetPropsWithRef<GetPropsFunctions<T>[P]>;
 };
 export interface AutocompleteState<T> {
+    inputRef: React.RefObject<HTMLInputElement>;
     focusItem: T | undefined;
     setFocusItem: (item?: T | undefined) => void;
     open: boolean;
@@ -40,7 +41,6 @@ export interface AdapterProps<T> {
 export interface Contextual<T> extends PassthroughProps<T>, AdapterProps<T>, Equality<T>, AutocompleteState<T> {
     tmpValue?: string;
     setTmpValue: (value?: string | undefined) => void;
-    inputRef: React.RefObject<HTMLInputElement>;
 }
 export interface Clearable {
     clearable: boolean;

diff --git a/types/hooks/useAutocomplete.d.ts b/types/hooks/useAutocomplete.d.ts
@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import type { AutocompleteProps } from '../common';
 declare const useAutocomplete: <T, FeatureYield extends object>({ value, onChange, feature: useFeature, traversal: useTraversal, ...passthrough }: AutocompleteProps<T, FeatureYield>) => {
+    inputRef: import("react").RefObject<HTMLInputElement>;
     focusItem: T | undefined;
     setFocusItem: (item?: T | undefined) => void;
     open: boolean;

diff --git a/types/hooks/useCombobox.d.ts b/types/hooks/useCombobox.d.ts
@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import type { ComboboxProps } from '../common';
 declare const useCombobox: <T, FeatureYield extends object>({ isEqual, getItemValue: _getItemValue, selected, onSelectChange, flipOnSelect, ...passthrough }: ComboboxProps<T, FeatureYield>) => {
+    inputRef: import("react").RefObject<HTMLInputElement>;
     focusItem: T | undefined;
     setFocusItem: (item?: T | undefined) => void;
     open: boolean;

diff --git a/types/hooks/useMultiSelect.d.ts b/types/hooks/useMultiSelect.d.ts
@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import type { MultiSelectProps } from '../common';
 declare const useMultiSelect: <T, FeatureYield extends object>({ isEqual, getItemValue, selected, onSelectChange: _onSelectChange, flipOnSelect, ...passthrough }: MultiSelectProps<T, FeatureYield>) => {
+    inputRef: import("react").RefObject<HTMLInputElement>;
     focusItem: T | undefined;
     setFocusItem: (item?: T | undefined) => void;
     open: boolean;