Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): focus add node popover on open

Browse Source 
Need an extra ref to pass to the InvSelect component.
This commit is contained in:
psychedelicious 2023-12-31 19:34:05 +11:00 committed by Kent Keirsey
parent 5168415999
commit 6209fef63d
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/common/components/InvSelect/InvSelect.tsx
View File

@ -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}

1
invokeai/frontend/web/src/common/components/InvSelect/types.ts
View File

@ -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,

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

@ -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>