mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-04 05:28:59 +01:00 
			
		
		
		
	refactor(react/note_icon): introduce autofocus at text box level
This commit is contained in:
		
							parent
							
								
									076c0321cf
								
							
						
					
					
						commit
						b213453062
					
				@ -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>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user