Shift focus to entering next search term when finish editing the curretn one

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48559678

fbshipit-source-id: 88075c473f8296a6d734116e9f2b02e941b3d7c7

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -71,6 +71,11 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
       ? searchExpression[searchExpression.length - 1].searchValue !== undefined
       : false;
 
+  const searchTermFinderRef = React.useRef<{
+    focus: () => void;
+    blur: () => void;
+    scrollTo: () => void;
+  }>(null);
   const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
     string | null
   >(null);
@@ -114,6 +119,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
                         },
                       ];
                     });
+                    searchTermFinderRef.current?.focus();
                   }}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter' || event.key === 'Escape') {
@@ -141,6 +147,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
         })}
       </Space>
       <AutoComplete<string, AutocompleteOption>
+        ref={searchTermFinderRef}
         style={{flex: '1'}}
         options={options}
         bordered={false}