Support keyboard

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

Reviewed By: lblasa

Differential Revision: D48559580

fbshipit-source-id: 683969879c213b869faadc60c6caab8f716b8688

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

@@ -71,6 +71,10 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
       ? searchExpression[searchExpression.length - 1].searchValue !== undefined
       : false;
 
+  const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
+    string | null
+  >(null);
+
   return (
     <div style={{display: 'flex', flexDirection: 'row'}}>
       <Space size={[0, 8]}>
@@ -111,8 +115,8 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
                       ];
                     });
                   }}
-                  onKeyUp={(event) => {
+                  onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
+                    if (event.key === 'Enter' || event.key === 'Escape') {
                       event.currentTarget.blur();
                     }
                   }}
@@ -153,12 +157,23 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
               operator: operatorConfig,
             },
           ]);
+          setSearchTermFinderValue(null);
         }}
         filterOption={(inputValue, option) => {
           return !!option?.label
             .toLowerCase()
             .includes(inputValue.toLowerCase());
         }}
+        value={searchTermFinderValue}
+        onChange={setSearchTermFinderValue}
+        onBlur={() => {
+          setSearchTermFinderValue(null);
+        }}
+        onInputKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            setSearchTermFinderValue(null);
+          }
+        }}
       />
     </div>
   );