Select preset input when opening

src/app/components/BtnInput.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'preact/hooks'
 import { Octicon } from '.'
 
 type BtnInputProps = {
@@ -5,19 +6,28 @@ type BtnInputProps = {
 	label?: string,
 	large?: boolean,
 	type?: 'number' | 'text',
+	doSelect?: number,
 	value?: string,
 	onChange?: (value: string) => unknown,
 }
-export function BtnInput({ icon, label, large, type, value, onChange }: BtnInputProps) {
+export function BtnInput({ icon, label, large, type, doSelect, value, onChange }: BtnInputProps) {
 	const onKeyUp = onChange === undefined ? () => {} : (e: any) => {
 		const value = (e.target as HTMLInputElement).value
 		if (type !== 'number' || (!value.endsWith('.') && !isNaN(Number(value)))) {
 			onChange?.(value)
 		}
 	}
+
+	const ref = useRef<HTMLInputElement>(null)
+	useEffect(() => {
+		if (doSelect && ref.current) {
+			ref.current.select()
+		}
+	}, [doSelect])
+
 	return <div class={`btn btn-input ${large ? 'large-input' : ''}`} onClick={e => e.stopPropagation()}>
 		{icon && Octicon[icon]}
 		{label && <span>{label}</span>}
-		<input type="text" value={value} onKeyUp={onKeyUp} />
+		<input ref={ref} type="text" value={value} onKeyUp={onKeyUp} />
 	</div>
 }

src/app/pages/Generator.tsx

@@ -147,7 +147,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion, categor
 			<div class="controls">
 				<Btn icon="upload" label={loc('import')} onClick={importSource} />
 				{modelConfig.path && <BtnMenu icon="archive" label={loc('presets')} relative={false}>
-					<BtnInput icon="search" large value={presetFilter} onChange={setPresetFilter} />
+					<BtnInput icon="search" large value={presetFilter} onChange={setPresetFilter} doSelect={1} />
 					<div class="result-list">
 						{presetResults.map(preset => <Btn label={preset} onClick={() => loadPreset(preset)} />)}
 					</div>