From 110166bc8a33607833ad0ebbff12e6a1465e04cc Mon Sep 17 00:00:00 2001
From: Emma Indal <emmai@spotify.com>
Date: Thu, 11 Nov 2021 10:39:53 +0100
Subject: [PATCH] focus search input field on mount

Signed-off-by: Emma Indal <emmai@spotify.com>
---
 plugins/search/src/components/SearchBar/SearchBar.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index 53802899eb..8d493df5f8 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, KeyboardEvent, useState } from 'react';
+import React, { useEffect, KeyboardEvent, useState, useRef } from 'react';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { useDebounce } from 'react-use';
 import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
@@ -40,6 +40,11 @@ export const SearchBarBase = ({
   placeholder: overridePlaceholder,
 }: PresenterProps) => {
   const configApi = useApi(configApiRef);
+  const inputRef = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    inputRef?.current?.focus();
+  }, []);
 
   const onKeyDown = React.useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -60,6 +65,7 @@ export const SearchBarBase = ({
 
   return (
     <InputBase
+      inputRef={inputRef}
       data-testid="search-bar-next"
       fullWidth
       placeholder={placeholder}