christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 13:45:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI: Enable 'Enter' key to apply filters in ColumnFilterPopover. Improved search usability by allowing quick selection and application of filters from the keyboard.

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-22 17:06:35 +02:00
parent d43d9931c6
commit f01b720c05
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColumnFilterPopover.tsx
+20
View File
@@ -105,6 +105,7 @@ export function ColumnFilterPopover({
setConditionResult(results); setConditionResult(results);
onSelectAll(results); onSelectAll(results);
setActiveTab('values'); setActiveTab('values');
onClose();
}; };
const handleMouseDown = (index: number) => { const handleMouseDown = (index: number) => {
@@ -201,6 +202,13 @@ export function ColumnFilterPopover({
placeholder="Filter values..." placeholder="Filter values..."
value={search} value={search}
onChange={e => setSearch(e.target.value)} onChange={e => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && search) {
e.preventDefault();
onSelectAll(filteredValues);
onClose();
}
}}
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500" className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
autoFocus autoFocus
/> />
@@ -320,6 +328,12 @@ export function ColumnFilterPopover({
type="text" type="text"
value={condition.value} value={condition.value}
onChange={e => setCondition({ ...condition, value: e.target.value })} onChange={e => setCondition({ ...condition, value: e.target.value })}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value) {
e.preventDefault();
applyCondition();
}
}}
placeholder="Enter value..." placeholder="Enter value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500" className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/> />
@@ -332,6 +346,12 @@ export function ColumnFilterPopover({
type="text" type="text"
value={condition.value2 || ''} value={condition.value2 || ''}
onChange={e => setCondition({ ...condition, value2: e.target.value })} onChange={e => setCondition({ ...condition, value2: e.target.value })}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value && condition.value2) {
e.preventDefault();
applyCondition();
}
}}
placeholder="Enter second value..." placeholder="Enter second value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500" className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/> />