Add autoFocus functionality to search.json

README.md

@@ -214,6 +214,13 @@ For search providers to work, make sure your `search.json` resembles the followi
 }
 ```
 
+You can also customize whether or not the search bar automatically focusses on render by adding
+the following to `search.json`, on the same level where properties like `providers` are located:
+
+```json
+  "autoFocus": true,
+```
+
 ### Imprint
 
 In order for the imprint-modal to show up, make sure your `imprint.json` resembles the following:

data/search.json

@@ -1,6 +1,7 @@
 {
   "placeholder": "",
   "defaultProvider": "https://google.com/search?q=",
+  "autoFocus": false,
   "providers": [
     {
       "name": "Allmusic",

src/components/searchBar.tsx

@@ -44,6 +44,7 @@ export interface ISearchProviderProps {
 export interface ISearchProps {
   placeholder: string;
   defaultProvider: string;
+  autoFocus?: boolean;
   providers: Array<ISearchProviderProps> | undefined;
 }
 
@@ -99,6 +100,10 @@ const SearchBar = ({ search }: ISearchBarProps) => {
     e.preventDefault();
   };
 
+  const autoFocus = () => {
+    return search.autoFocus !== undefined ? search.autoFocus : false;
+  };
+
   return (
     <Search onSubmit={(e) => handleSearchQuery(e)}>
       <SearchInput
@@ -106,6 +111,7 @@ const SearchBar = ({ search }: ISearchBarProps) => {
         data-testid="search-input"
         value={input}
         placeholder={search.placeholder}
+        autoFocus={autoFocus()}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           setInput(e.target.value)
         }

src/data/search.json

@@ -1,6 +1,7 @@
 {
   "placeholder": "",
   "defaultProvider": "https://google.com/search?q=",
+  "autoFocus": false,
   "providers": [
     {
       "name": "Allmusic",

src/test/components/searchBar.spec.tsx

@@ -5,7 +5,7 @@ import SearchBar, {
   ISearchProps,
 } from "../../components/searchBar";
 
-const props: ISearchProps = {
+const defaultProps: ISearchProps = {
   defaultProvider: "https://test.com?q=",
   placeholder: "",
   providers: [
@@ -27,7 +27,7 @@ const props: ISearchProps = {
   ],
 };
 
-const setup = () => {
+const setup = (props: ISearchProps = defaultProps) => {
   const searchBar = render(<SearchBar search={props} />);
   const input = searchBar.getByTestId("search-input");
   const clearButton = searchBar.getByTestId("search-clear");
@@ -55,25 +55,25 @@ describe("searchBar.tsx", () => {
   });
 
   it("Tests SearchBar rendering with properties", () => {
-    const { asFragment } = render(<SearchBar search={props} />);
+    const { searchBar } = setup();
-    expect(asFragment).toMatchSnapshot();
+    expect(searchBar.asFragment).toMatchSnapshot();
   });
 
   it("Tests searchBar rendering without properties", () => {
-    const { asFragment } = render(<SearchBar />);
+    const searchBar = render(<SearchBar />);
-    expect(asFragment).toMatchSnapshot();
+    expect(searchBar.asFragment).toMatchSnapshot();
   });
 
   it("Tests handleQueryWithProvider", () => {
-    props.providers?.forEach((provider: ISearchProviderProps) => {
+    defaultProps.providers?.forEach((provider: ISearchProviderProps) => {
-      handleQueryWithProvider(props, provider.prefix + " test");
+      handleQueryWithProvider(defaultProps, provider.prefix + " test");
       expect(window.location.href).toEqual(provider.url + "test");
     });
   });
 
   it("Tests handleQueryWithProvider default", () => {
-    handleQueryWithProvider(props, "test");
+    handleQueryWithProvider(defaultProps, "test");
-    expect(window.location.href).toEqual(props.defaultProvider + "test");
+    expect(window.location.href).toEqual(defaultProps.defaultProvider + "test");
   });
 
   it("Tests handleQueryWithProvider without providers", () => {
@@ -87,12 +87,27 @@ describe("searchBar.tsx", () => {
     expect(window.location.href).toEqual(test.defaultProvider + "test");
   });
 
+  it("Tests SearchBar with autoFocus not set", () => {
+    const { input } = setup();
+    expect(input).not.toHaveFocus();
+  });
+
+  it("Tests SearchBar with autoFocus set to true", () => {
+    const { input } = setup({ ...defaultProps, autoFocus: true });
+    expect(input).toHaveFocus();
+  });
+
+  it("Tests SearchBar with autoFocus set to false", () => {
+    const { input } = setup({ ...defaultProps, autoFocus: false });
+    expect(input).not.toHaveFocus();
+  });
+
   it("Tests SearchBar component with default search", () => {
     const { input, submitButton } = setup();
     fireEvent.change(input, { target: { value: "test" } });
     fireEvent.click(submitButton);
 
-    expect(window.location.href).toEqual(props.defaultProvider + "test");
+    expect(window.location.href).toEqual(defaultProps.defaultProvider + "test");
   });
 
   it("Tests SearchBar component with other search", () => {
@@ -113,6 +128,6 @@ describe("searchBar.tsx", () => {
     fireEvent.click(clearButton);
     fireEvent.click(submitButton);
 
-    expect(window.location.href).toEqual(props.defaultProvider);
+    expect(window.location.href).toEqual(defaultProps.defaultProvider);
   });
 });