From 424fdfe0ee624f183ffe32739de464b898ec3d1f Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 6 May 2021 16:11:21 +1000 Subject: [PATCH 1/5] autofocus first input in dialog, as per WCAG spec, add keydown event handler for query updates --- .../admin-ui/src/pages/ListPage/FilterAdd.tsx | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx index a0f5ae89919..28d11a5d045 100644 --- a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx +++ b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx @@ -123,24 +123,39 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li }); return filtersByFieldThenType; }, [router.query, fieldsWithFilters]); + // useEffect(() => { + // const listener = () => console.log('SOME KEY IS PRESSED'); + // document.addEventListener('keydown', listener); + // return document.removeEventListener('keydown', listener); + // }); const [state, setState] = useState({ kind: 'selecting-field' }); + const updateFilters = () => { + if (state.kind === 'filter-value') { + router.push({ + query: { + ...router.query, + [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue), + }, + }); + onClose(); + } + }; + return ( ) => { + if (event.code === 'Enter') { + event.preventDefault(); + updateFilters(); + } + }} css={{ minWidth: 320 }} onSubmit={(event: FormEvent) => { event.preventDefault(); - if (state.kind === 'filter-value') { - router.push({ - query: { - ...router.query, - [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue), - }, - }); - onClose(); - } + updateFilters(); }} gap="small" > @@ -180,6 +195,7 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li {state.kind === 'selecting-field' && ( { const fieldPath: string = (newVal as any).value; const filterType = Object.keys(filtersByFieldThenType[fieldPath])[0]; From 8224406f67cecc4e2787f4f6921c2cd9570e12b8 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 6 May 2021 16:19:01 +1000 Subject: [PATCH 2/5] woopsies comments --- packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx index 28d11a5d045..649af947d13 100644 --- a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx +++ b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx @@ -123,11 +123,6 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li }); return filtersByFieldThenType; }, [router.query, fieldsWithFilters]); - // useEffect(() => { - // const listener = () => console.log('SOME KEY IS PRESSED'); - // document.addEventListener('keydown', listener); - // return document.removeEventListener('keydown', listener); - // }); const [state, setState] = useState({ kind: 'selecting-field' }); const updateFilters = () => { From fed05caebb061ee9a8a4fe28c916e7c20f4f9eb2 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Fri, 7 May 2021 11:51:56 +1000 Subject: [PATCH 3/5] changeset --- .changeset/light-balloons-beam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/light-balloons-beam.md diff --git a/.changeset/light-balloons-beam.md b/.changeset/light-balloons-beam.md new file mode 100644 index 00000000000..7e137551b78 --- /dev/null +++ b/.changeset/light-balloons-beam.md @@ -0,0 +1,5 @@ +--- +'@keystone-next/admin-ui': patch +--- + +Added minor fixes to filters dialog. From ae8d8fe7106cece0242f379dd512533c96f719f6 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Fri, 7 May 2021 12:03:35 +1000 Subject: [PATCH 4/5] just button things --- .../admin-ui/src/pages/ListPage/FilterAdd.tsx | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx index 649af947d13..224a97dad10 100644 --- a/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx +++ b/packages-next/admin-ui/src/pages/ListPage/FilterAdd.tsx @@ -125,38 +125,29 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li }, [router.query, fieldsWithFilters]); const [state, setState] = useState({ kind: 'selecting-field' }); - const updateFilters = () => { - if (state.kind === 'filter-value') { - router.push({ - query: { - ...router.query, - [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue), - }, - }); - onClose(); - } - }; - return ( ) => { - if (event.code === 'Enter') { - event.preventDefault(); - updateFilters(); - } - }} css={{ minWidth: 320 }} onSubmit={(event: FormEvent) => { event.preventDefault(); - updateFilters(); + if (state.kind === 'filter-value') { + router.push({ + query: { + ...router.query, + [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue), + }, + }); + onClose(); + } }} gap="small" >
{state.kind !== 'selecting-field' && (