markus/next-ory
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-04-10 11:58:41 +00:00
Code Releases Packages Activity

NORY-41: refactor search to react on "enter" pressed

Browse source
This commit is contained in:
Markus Thielker 2025-01-04 14:59:59 +01:00
parent e92828b9cf
commit 8032f11d30
No known key found for this signature in database
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
dashboard/src/components/search-input.tsx
View file

@ -2,7 +2,7 @@
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { ChangeEvent, HTMLInputTypeAttribute } from 'react'; import { HTMLInputTypeAttribute, useState } from 'react';
interface SearchInputProps { interface SearchInputProps {
value: string; value: string;
@ -18,9 +18,10 @@ export function SearchInput({ value, placeholder, pageParamKey, queryParamKey, t
const router = useRouter(); const router = useRouter();
const params = useSearchParams(); const params = useSearchParams();
const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => { const [searchInput, setSearchInput] = useState(value);
const onSearchChange = (value: string) => {
const value = event.target.value;
const newParams = new URLSearchParams(params.toString()); const newParams = new URLSearchParams(params.toString());
if (value.length < 1) { if (value.length < 1) {
@ -34,12 +35,19 @@ export function SearchInput({ value, placeholder, pageParamKey, queryParamKey, t
router.replace('?' + newParams.toString()); router.replace('?' + newParams.toString());
}; };
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
onSearchChange(searchInput);
}
};
return ( return (
<Input <Input
value={value} value={searchInput}
type={type ?? 'text'} type={type ?? 'text'}
placeholder={placeholder} placeholder={placeholder}
className={className} className={className}
onChange={onSearchChange}/> onChange={(e) => setSearchInput(e.target.value)}
onKeyDown={handleKeyDown}/>
); );
} }