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();
 | 
					        loadIcons();
 | 
				
			||||||
    }, [ search, categoryId ]);
 | 
					    }, [ search, categoryId ]);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // Focus on search by default.
 | 
					 | 
				
			||||||
    useEffect(() => {
 | 
					 | 
				
			||||||
        searchBoxRef?.current?.focus();
 | 
					 | 
				
			||||||
    }, []);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
        <>
 | 
					        <>
 | 
				
			||||||
            <div class="filter-row">
 | 
					            <div class="filter-row">
 | 
				
			||||||
@ -124,6 +119,7 @@ function NoteIconList() {
 | 
				
			|||||||
                    type="text"
 | 
					                    type="text"
 | 
				
			||||||
                    name="icon-search"
 | 
					                    name="icon-search"
 | 
				
			||||||
                    currentValue={search} onChange={setSearch}
 | 
					                    currentValue={search} onChange={setSearch}
 | 
				
			||||||
 | 
					                    autoFocus
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
            </div>
 | 
					            </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"> {
 | 
					interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "value"> {
 | 
				
			||||||
    id?: string;
 | 
					    id?: string;
 | 
				
			||||||
@ -8,7 +8,7 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
 | 
				
			|||||||
    inputRef?: RefObject<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) {
 | 
					    if (type === "number" && currentValue) {
 | 
				
			||||||
        const { min, max } = rest;
 | 
					        const { min, max } = rest;
 | 
				
			||||||
        const currentValueNum = parseInt(currentValue, 10);
 | 
					        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 (
 | 
					    return (
 | 
				
			||||||
        <input
 | 
					        <input
 | 
				
			||||||
            ref={inputRef}
 | 
					            ref={inputRef}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user