martials/old.martials.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed onTyping function being called on every type

Browse Source
This commit is contained in:
Martin Berg Alstad 2023-01-10 22:50:29 +01:00
parent c3e6414504
commit 4084522528
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/input.tsx
View File

@ -39,6 +39,7 @@ function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter
interface Input<T> extends InputProps<T> { interface Input<T> extends InputProps<T> {
leading?: JSX.Element, leading?: JSX.Element,
trailing?: JSX.Element, trailing?: JSX.Element,
onChange?: () => void,
} }
export const Input: Component<Input<HTMLInputElement>> = ( export const Input: Component<Input<HTMLInputElement>> = (
@ -77,7 +78,7 @@ export const Input: Component<Input<HTMLInputElement>> = (
return ( return (
<Row className={ "relative" }> <Row className={ "relative" }>
{ leading } { leading }
<HoverTitle title={ title } isActive={ isFocused() || isHover() || isText() } htmlFor={ id }/> <HoverTitle title={ title } isActive={ isFocused() || isHover() || isText() } htmlFor={ id } />
<input <input
class={ `bg-default-bg focus:border-cyan-500 outline-none border-2 border-gray-500 class={ `bg-default-bg focus:border-cyan-500 outline-none border-2 border-gray-500
hover:border-t-cyan-400 ${ className }` } hover:border-t-cyan-400 ${ className }` }
@ -88,8 +89,12 @@ export const Input: Component<Input<HTMLInputElement>> = (
type={ type } type={ type }
placeholder={ placeholder ?? undefined } placeholder={ placeholder ?? undefined }
required={ required } required={ required }
onInput={ () => setSetIsText(id, isText(), setIsText) } onInput={ () => {
onChange={ onChange /*TODO only called after ENTER*/ }/> setSetIsText(id, isText(), setIsText);
if (onChange) {
onChange();
}
} } />
{ trailing } { trailing }
</Row> </Row>
); );
@ -107,7 +112,7 @@ function HoverTitle(
transition-all duration-150 text-gray-600 dark:text-gray-400` } transition-all duration-150 text-gray-600 dark:text-gray-400` }
for={ htmlFor }> for={ htmlFor }>
<div class={ "z-50 relative" }>{ title }</div> <div class={ "z-50 relative" }>{ title }</div>
<div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" }/> <div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" } />
</label> </label>
); );
} }