fix(playground): adding a query parameter in Playground requires one …

…extra click to type in search field (#4295)

* fix: focus on input on open popup in playground and focus on input on type

* fix: exclude some additional keys and fix some bugs

* fix: gaps in searchbar inside the menu item

Co-authored-by: Sergey Garin <sergey.garin@cube.dev>

packages/cubejs-playground/src/QueryBuilder/MemberDropdown.tsx

@@ -26,9 +26,9 @@ const SearchMenuItem = styled(Menu.Item)`
   // antd uses double class pattern (.disabled.active.active) to override the value of background color. actually the
   // easiest way to override it is to use smtn with higher specificity
   background: white !important;
-  padding-top: 10px;
-  padding-bottom: 0;
-  margin-bottom: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
   cursor: default;
 
   ::after {
@@ -79,6 +79,7 @@ export default function MemberMenu({
   onClick,
   ...buttonProps
 }: MemberDropdownProps) {
+  const searchInputRef = useRef<Input | null>(null);
   const flexSearch = useRef(FlexSearch.create<string>({ encode: 'advanced' }));
   const [search, setSearch] = useState<string>('');
   const [filteredKeys, setFilteredKeys] = useState<string[]>([]);
@@ -121,26 +122,61 @@ export default function MemberMenu({
   return (
     <ButtonDropdown
       {...buttonProps}
+      onClick={() => {
+        // we need to delay focusing since React needs to render <Menu /> first :)
+        setTimeout(() => {
+          searchInputRef.current?.focus({ preventScroll: true });
+        });
+      }}
       overlay={
         <Menu
+          onKeyDown={(e) => {
+            if (
+              [
+                'ArrowDown',
+                'ArrowUp',
+                'ArrowLeft',
+                'ArrowRight',
+                'Enter',
+                'Escape',
+                'Tab',
+                'CapsLock',
+              ].includes(e.key)
+            ) {
+              return;
+            }
+
+            if (document.activeElement === searchInputRef.current?.input)
+              return;
+
+            searchInputRef.current?.focus({ preventScroll: true });
+          }}
           onClick={(event) => {
+            if (['__not-found__', '__search_field__'].includes(event.key)) {
+              return;
+            }
+
             setSearch('');
             setFilteredKeys([]);
             onClick(indexedMembers[event.key]);
           }}
         >
           {hasMembers ? (
             <>
-              <SearchMenuItem disabled>
+              <SearchMenuItem disabled key="__search_field__">
                 <Input
+                  ref={searchInputRef}
                   placeholder="Search"
                   autoFocus
-                  value={search}
                   allowClear
                   onKeyDown={(event) => {
-                    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
                       event.preventDefault();
                     }
+
+                    if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+                      event.stopPropagation();
+                    }
                   }}
                   onChange={(event) => {
                     setSearch(event.target.value);
@@ -167,7 +203,9 @@ export default function MemberMenu({
               })}
             </>
           ) : showNoMembersPlaceholder ? (
-            <Menu.Item disabled>No members found</Menu.Item>
+            <Menu.Item key="__not-found__" disabled>
+              No members found
+            </Menu.Item>
           ) : null}
         </Menu>
       }