fix(ui): focus add node popover on open

Need an extra ref to pass to the InvSelect component.

invokeai/frontend/web/src/common/components/InvSelect/InvSelect.tsx

@@ -4,7 +4,7 @@ import type {
   StylesConfig,
 } from 'chakra-react-select';
 import { Select as ChakraReactSelect } from 'chakra-react-select';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 
 import { CustomMenuList } from './CustomMenuList';
 import { CustomOption } from './CustomOption';
@@ -29,7 +29,7 @@ const components: SelectComponentsConfig<
 };
 
 export const InvSelect = memo((props: InvSelectProps) => {
-  const { sx, selectRef, ...rest } = props;
+  const { sx, selectRef, inputRef, ...rest } = props;
   const chakraStyles = useMemo<CustomChakraStylesConfig>(
     () => ({
       container: (provided, _state) => ({ ...provided, w: 'full', ...sx }),
@@ -55,6 +55,13 @@ export const InvSelect = memo((props: InvSelectProps) => {
     [sx]
   );
 
+  useEffect(() => {
+    if (!inputRef) {
+      return;
+    }
+    inputRef.current = selectRef?.current?.inputRef ?? null;
+  }, [inputRef, selectRef]);
+
   return (
     <ChakraReactSelect<InvSelectOption, false, GroupBase<InvSelectOption>>
       ref={selectRef}

invokeai/frontend/web/src/common/components/InvSelect/types.ts

@@ -28,6 +28,7 @@ export type InvSelectProps = ChakraReactSelectProps<
   selectRef?: React.RefObject<
     SelectInstance<InvSelectOption, false, GroupBase<InvSelectOption>>
   >;
+  inputRef?: React.MutableRefObject<HTMLInputElement | null>;
 };
 export type CustomChakraStylesConfig = ChakraStylesConfig<
   InvSelectOption,

invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx

@@ -65,6 +65,8 @@ const AddNodePopover = () => {
   const toaster = useAppToaster();
   const { t } = useTranslation();
   const selectRef = useRef<SelectInstance<InvSelectOption> | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const fieldFilter = useAppSelector(
     (state) => state.nodes.connectionStartFieldType
   );
@@ -201,6 +203,7 @@ const AddNodePopover = () => {
       closeDelay={0}
       closeOnBlur={true}
       returnFocusOnClose={true}
+      initialFocusRef={inputRef}
     >
       <InvPopoverAnchor>
         <Flex
@@ -230,6 +233,7 @@ const AddNodePopover = () => {
             onChange={onChange}
             onMenuClose={onClose}
             onKeyDown={onKeyDown}
+            inputRef={inputRef}
           />
         </InvPopoverBody>
       </InvPopoverContent>