Fixed auto-focus in prompt and env dropdown

This commit is contained in:
Gregory Schier
2023-10-28 22:14:12 -07:00
parent 7b7e43a185
commit 235ab2056d
5 changed files with 25 additions and 23 deletions

View File

@@ -36,21 +36,17 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
[activeEnvironment?.id],
),
{ type: 'separator', label: 'Environments' },
...((environments.length > 0
? [
{
key: 'edit',
label: 'Manage Environments',
leftSlot: <Icon icon="gear" />,
onSelect: async () => {
dialog.show({
title: 'Environments',
render: () => <EnvironmentEditDialog />,
});
},
},
]
: []) as DropdownItem[]),
{
key: 'edit',
label: 'Manage Environments',
leftSlot: <Icon icon="gear" />,
onSelect: async () => {
dialog.show({
title: 'Environments',
render: () => <EnvironmentEditDialog />,
});
},
},
],
[activeEnvironment, dialog, environments, routes],
);

View File

@@ -23,7 +23,6 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
import { IconButton } from './core/IconButton';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { w } from '@tauri-apps/api/clipboard-79413165';
interface Props {
className?: string;
@@ -156,7 +155,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
);
return (
<div aria-hidden={hidden} className="relative h-full">
<div aria-hidden={hidden} className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
<HStack className="mt-1 pt-1 mx-2" justifyContent="between" alignItems="center" space={1}>
<WorkspaceActionsDropdown forDropdown={false} className="text-left mb-0" justify="start" />
<IconButton
@@ -176,12 +175,12 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
tabIndex={hidden ? -1 : 0}
className={classNames(
className,
'h-full relative grid grid-rows-[auto_minmax(0,1fr)_auto]',
'h-full grid grid-rows-[auto_minmax(0,1fr)_auto]',
)}
>
<VStack
as="ul"
className="relative pb-3 overflow-y-auto overflow-x-visible pt-2"
className="pb-3 overflow-y-auto overflow-x-visible pt-2"
draggable={false}
>
<SidebarItems
@@ -249,7 +248,7 @@ function SidebarItems({ requests, focused, selectedIndex, onSelect, onClearSelec
updateRequest.mutate({ id: requestId, update });
}
},
[hoveredIndex, requests, updateRequest],
[hoveredIndex, requests, updateRequest, onClearSelected],
);
return (

View File

@@ -28,6 +28,7 @@ export interface EditorProps {
contentType?: string | null;
forceUpdateKey?: string;
autoFocus?: boolean;
autoSelect?: boolean;
defaultValue?: string | null;
placeholder?: string;
tooltipContainer?: HTMLElement;
@@ -50,6 +51,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
heightMode,
contentType,
autoFocus,
autoSelect,
placeholder,
useTemplating,
defaultValue,
@@ -170,7 +172,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
view = new EditorView({ state, parent: container });
cm.current = { view, languageCompartment };
syncGutterBg({ parent: container, className });
if (autoFocus) view.focus();
if (autoFocus) {
view.focus();
}
if (autoSelect) {
view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
}
} catch (e) {
console.log('Failed to initialize Codemirror', e);
}

View File

@@ -8,7 +8,7 @@ import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
export type InputProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &
Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete' | 'forceUpdateKey'> & {
Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete' | 'forceUpdateKey' | 'autoFocus' | 'autoSelect'> & {
name: string;
type?: 'text' | 'password';
label: string;
@@ -24,7 +24,6 @@ export type InputProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'on
size?: 'sm' | 'md' | 'auto';
className?: string;
placeholder?: string;
autoFocus?: boolean;
validate?: (v: string) => boolean;
require?: boolean;
};

View File

@@ -30,6 +30,7 @@ export function Prompt({ onHide, label, name, defaultValue, onResult }: PromptPr
<Input
hideLabel
require
autoSelect
label={label}
name={name}
defaultValue={defaultValue}