gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: filter checkbox not clickable (#817)

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-05-24 09:38:34 -04:00 committed by GitHub
parent 8d3473b499
commit 66b0d7992d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/src/components/collections/FilterControl.tsx
View File

@ -2,11 +2,11 @@ import React, { useCallback, useMemo } from 'react';
import { translate } from 'react-polyglot'; import { translate } from 'react-polyglot';
import Menu from '../common/menu/Menu'; import Menu from '../common/menu/Menu';
import MenuItemButton from '../common/menu/MenuItemButton';
import MenuGroup from '../common/menu/MenuGroup'; import MenuGroup from '../common/menu/MenuGroup';
import MenuItemButton from '../common/menu/MenuItemButton';
import type { FilterMap, TranslatedProps, ViewFilter } from '@staticcms/core/interface'; import type { FilterMap, TranslatedProps, ViewFilter } from '@staticcms/core/interface';
import type { ChangeEvent, MouseEvent } from 'react'; import type { MouseEvent } from 'react';
interface FilterControlProps { interface FilterControlProps {
filter: Record<string, FilterMap>; filter: Record<string, FilterMap>;
@ -23,7 +23,7 @@ const FilterControl = ({
const anyActive = useMemo(() => Object.keys(filter).some(key => filter[key]?.active), [filter]); const anyActive = useMemo(() => Object.keys(filter).some(key => filter[key]?.active), [filter]);
const handleFilterClick = useCallback( const handleFilterClick = useCallback(
(viewFilter: ViewFilter) => (event: MouseEvent | ChangeEvent) => { (viewFilter: ViewFilter) => (event: MouseEvent) => {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
onFilterClick(viewFilter); onFilterClick(viewFilter);
@ -43,17 +43,15 @@ const FilterControl = ({
return ( return (
<MenuItemButton key={viewFilter.id} onClick={handleFilterClick(viewFilter)}> <MenuItemButton key={viewFilter.id} onClick={handleFilterClick(viewFilter)}>
<input <input
key={`${labelId}-${checked}`}
id={labelId} id={labelId}
type="checkbox" type="checkbox"
value="" value=""
className="" className=""
checked={checked} checked={checked}
onChange={handleFilterClick(viewFilter)} readOnly
/> />
<label <label className="ml-2 text-sm font-medium text-gray-800 dark:text-gray-300">
htmlFor={labelId}
className="ml-2 text-sm font-medium text-gray-800 dark:text-gray-300"
>
{viewFilter.label} {viewFilter.label}
</label> </label>
</MenuItemButton> </MenuItemButton>