Merge pull request #12 from aaronfreeman/focus-search-box

fix: focus on search box when select opens

.gitignore

@@ -19,6 +19,8 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
+.yarn
+.yarnrc.yml
 
 npm-debug.log*
 yarn-debug.log*

src/components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 
 import { SearchIcon } from "./Icons";
 import { SelectContext } from "./SelectProvider";
@@ -10,12 +10,10 @@ interface SearchInputProps {
     name?: string;
 }
 
-const SearchInput: React.FC<SearchInputProps> = ({
-    placeholder = "",
-    value = "",
-    onChange,
-    name = ""
-}) => {
+const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(
+    { placeholder = "", value = "", onChange, name = "" },
+    ref
+) {
     const { classNames } = useContext(SelectContext);
     return (
         <div
@@ -33,6 +31,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
                 }
             />
             <input
+                ref={ref}
                 className={
                     classNames && classNames.searchBox
                         ? classNames.searchBox
@@ -46,6 +45,6 @@ const SearchInput: React.FC<SearchInputProps> = ({
             />
         </div>
     );
-};
+});
 
 export default SearchInput;

src/components/Select.tsx

@@ -67,6 +67,7 @@ const Select: React.FC<SelectProps> = ({
     const [list, setList] = useState<ListOption>(options);
     const [inputValue, setInputValue] = useState<string>("");
     const ref = useRef<HTMLDivElement>(null);
+    const searchBoxRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         const formatItem = (item: Option) => {
@@ -91,6 +92,16 @@ const Select: React.FC<SelectProps> = ({
         );
     }, [options]);
 
+    useEffect(() => {
+        if (isSearchable) {
+            if (open) {
+                searchBoxRef.current?.select();
+            } else {
+                setInputValue("");
+            }
+        }
+    }, [open, isSearchable]);
+
     const toggle = useCallback(() => {
         if (!isDisabled) {
             setOpen(!open);
@@ -297,6 +308,7 @@ const Select: React.FC<SelectProps> = ({
                     >
                         {isSearchable && (
                             <SearchInput
+                                ref={searchBoxRef}
                                 value={inputValue}
                                 placeholder={searchInputPlaceholder}
                                 onChange={e => setInputValue(e.target.value)}