switch show/hide indicator

packages/app/src/components/Navbar/GlobalSearch.tsx

@@ -29,6 +29,7 @@ const GlobalSearch: FC<Props> = (props: Props) => {
 
   const [text, setText] = useState('');
   const [isScopeChildren, setScopeChildren] = useState<boolean>(appContainer.getConfig().isSearchScopeChildrenAsDefault);
+  const [isFocused, setFocused] = useState<boolean>(false);
 
   const gotoPage = useCallback((data: unknown[]) => {
     const page = data[0] as IPage; // should be single page selected
@@ -59,6 +60,8 @@ const GlobalSearch: FC<Props> = (props: Props) => {
 
   const isSearchServiceReachable = appContainer.getConfig().isSearchServiceReachable;
 
+  const isIndicatorShown = !isFocused && (text.length === 0);
+
   return (
     <div className={`form-group mb-0 d-print-none ${isSearchServiceReachable ? '' : 'has-error'}`}>
       <div className="input-group flex-nowrap">
@@ -80,12 +83,16 @@ const GlobalSearch: FC<Props> = (props: Props) => {
           isSearchServiceReachable={isSearchServiceReachable}
           dropup={dropup}
           onChange={gotoPage}
+          onBlur={() => setFocused(false)}
+          onFocus={() => setFocused(true)}
           onInputChange={text => setText(text)}
           onSubmit={search}
         />
-        <span className="grw-shortcut-key-indicator">
-          <code className="bg-transparent text-muted">/</code>
-        </span>
+        { isIndicatorShown && (
+          <span className="grw-shortcut-key-indicator">
+            <code className="bg-transparent text-muted">/</code>
+          </span>
+        ) }
       </div>
     </div>
   );

packages/app/src/components/SearchForm.tsx

@@ -84,6 +84,8 @@ type Props = {
   dropup?: boolean,
   keyword?: string,
   onChange?: (data: unknown[]) => void,
+  onBlur?: () => void,
+  onFocus?: () => void,
   onSubmit?: (input: string) => void,
   onInputChange?: (text: string) => void,
 };
@@ -93,7 +95,7 @@ const SearchForm: ForwardRefRenderFunction<IFocusable, Props> = (props: Props, r
   const { t } = useTranslation();
   const {
     isSearchServiceReachable, dropup,
-    onChange, onSubmit, onInputChange,
+    onChange, onBlur, onFocus, onSubmit, onInputChange,
   } = props;
 
   const [searchError, setSearchError] = useState<Error | null>(null);
@@ -129,8 +131,18 @@ const SearchForm: ForwardRefRenderFunction<IFocusable, Props> = (props: Props, r
       onSubmit={onSubmit}
       onInputChange={onInputChange}
       onSearchError={err => setSearchError(err)}
-      onBlur={() => setShownHelp(false)}
-      onFocus={() => setShownHelp(true)}
+      onBlur={() => {
+        setShownHelp(false);
+        if (onBlur != null) {
+          onBlur();
+        }
+      }}
+      onFocus={() => {
+        setShownHelp(true);
+        if (onFocus != null) {
+          onFocus();
+        }
+      }}
       helpElement={<SearchFormHelp isShownHelp={isShownHelp} isReachable={isSearchServiceReachable} />}
       keywordOnInit={props.keyword}
     />