refactor(react/note_icon): introduce autofocus at text box level

This commit is contained in:
Elian Doran 2025-08-21 15:11:08 +03:00
parent 076c0321cf
commit b213453062
No known key found for this signature in database
2 changed files with 9 additions and 7 deletions

View File

@ -102,11 +102,6 @@ function NoteIconList() {
loadIcons();
}, [ search, categoryId ]);
// Focus on search by default.
useEffect(() => {
searchBoxRef?.current?.focus();
}, []);
return (
<>
<div class="filter-row">
@ -124,6 +119,7 @@ function NoteIconList() {
type="text"
name="icon-search"
currentValue={search} onChange={setSearch}
autoFocus
/>
</div>

View File

@ -1,4 +1,4 @@
import type { InputHTMLAttributes, RefObject } from "preact/compat";
import { useEffect, type InputHTMLAttributes, type RefObject } from "preact/compat";
interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "value"> {
id?: string;
@ -8,7 +8,7 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
inputRef?: RefObject<HTMLInputElement>;
}
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur,...rest}: FormTextBoxProps) {
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) {
if (type === "number" && currentValue) {
const { min, max } = rest;
const currentValueNum = parseInt(currentValue, 10);
@ -19,6 +19,12 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
}
}
useEffect(() => {
if (autoFocus) {
inputRef?.current?.focus();
}
}, []);
return (
<input
ref={inputRef}