improve the behavior

This commit is contained in:
mbecker20
2023-03-17 20:55:37 +00:00
parent 34e6b4fc69
commit e976ea0a3a
2 changed files with 10 additions and 4 deletions

View File

@@ -79,6 +79,8 @@ const Header: Component<{}> = (p) => {
setEditingName(false); setEditingName(false);
setUpdatingName(false); setUpdatingName(false);
}} }}
onBlur={() => setEditingName(false)}
/> />
</Show> </Show>
</Show> </Show>

View File

@@ -5,6 +5,7 @@ const Input: Component<
onEdit?: (value: string) => void; onEdit?: (value: string) => void;
onConfirm?: (value: string) => void; onConfirm?: (value: string) => void;
onEnter?: (value: string) => void; onEnter?: (value: string) => void;
onEsc?: (value: string) => void;
disabled?: boolean; disabled?: boolean;
} & JSX.InputHTMLAttributes<HTMLInputElement> & } & JSX.InputHTMLAttributes<HTMLInputElement> &
JSX.HTMLAttributes<HTMLDivElement> JSX.HTMLAttributes<HTMLDivElement>
@@ -14,14 +15,16 @@ const Input: Component<
<input <input
{...p} {...p}
onInput={(e) => p.onEdit && p.onEdit(e.currentTarget.value)} onInput={(e) => p.onEdit && p.onEdit(e.currentTarget.value)}
onBlur={(e) => p.onConfirm && p.onConfirm(e.currentTarget.value)} onBlur={
p.onBlur || ((e) => p.onConfirm && p.onConfirm(e.currentTarget.value))
}
onKeyDown={ onKeyDown={
p.onKeyDown || p.onKeyDown ||
((e) => { ((e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
p.onEnter p.onEnter && p.onEnter(e.currentTarget.value);
? p.onEnter(e.currentTarget.value) } else if (e.key === "Escape") {
: e.currentTarget.blur(); p.onEsc ? p.onEsc(e.currentTarget.value) : e.currentTarget.blur();
} }
}) })
} }
@@ -37,6 +40,7 @@ export const AutofocusInput: Component<
onEdit?: (value: string) => void; onEdit?: (value: string) => void;
onConfirm?: (value: string) => void; onConfirm?: (value: string) => void;
onEnter?: (value: string) => void; onEnter?: (value: string) => void;
onEsc?: (value: string) => void;
disabled?: boolean; disabled?: boolean;
} & JSX.InputHTMLAttributes<HTMLInputElement> & } & JSX.InputHTMLAttributes<HTMLInputElement> &
JSX.HTMLAttributes<HTMLDivElement> JSX.HTMLAttributes<HTMLDivElement>