ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Exersice name field focus opens keyboard. Typing filters the options.

Browse Source
This commit is contained in:
AG
2025-11-28 22:56:18 +02:00
parent 2aacfb492d
commit 78930f6b80
3 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/FilledInput.tsx
View File

@@ -4,15 +4,18 @@ interface FilledInputProps {
label: string;
value: string | number;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
type?: string;
icon?: React.ReactNode;
autoFocus?: boolean;
step?: string;
inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
autoComplete?: string;
}
const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, type = "number", icon, autoFocus, step, inputMode, autocapitalize }) => (
const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete }) => (
<div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
<label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
{icon} {label}
@@ -26,7 +29,10 @@ const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, type
placeholder="0"
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
autoCapitalize={autocapitalize}
autoComplete={autoComplete}
/>
</div>
);