admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix table focus taking over auth and filter and sort (#478)

Browse Source
This commit is contained in:
Charles Bochet
2023-06-30 00:24:06 +03:00
committed by GitHub
parent 30fd3320b7
commit 74ea2718ca
5 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -167,7 +167,7 @@ function DropdownButton({
const onButtonClick = () => {
setIsUnfolded && setIsUnfolded(!isUnfolded);
setCaptureHotkeyTypeInFocus(!isUnfolded);
setCaptureHotkeyTypeInFocus((isPreviousUnfolded) => !isPreviousUnfolded);
};
const onOutsideClick = () => {

6
front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent, useCallback, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import {
FilterableFieldsType,
@ -7,6 +8,7 @@ import {
FilterOperandType,
SelectedFilterType,
} from '@/filters-and-sorts/interfaces/filters/interface';
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
import { SearchResultsType, useSearch } from '@/search/services/search';
import { humanReadableDate } from '@/utils/utils';
@ -31,6 +33,9 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
onFilterRemove,
}: OwnProps<TData>) => {
const [isUnfolded, setIsUnfolded] = useState(false);
const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
captureHotkeyTypeInFocusState,
);
const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
@ -127,6 +132,7 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
operand: selectedFilterOperand,
});
setIsUnfolded(false);
setCaptureHotkeyTypeInFocus(false);
setSelectedFilter(undefined);
}}
>

10
front/src/modules/ui/components/table/table-header/SortDropdownButton.tsx
View File

@ -1,9 +1,11 @@
import { useCallback, useState } from 'react';
import { useRecoilState } from 'recoil';
import {
SelectedSortType,
SortType,
} from '@/filters-and-sorts/interfaces/sorts/interface';
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
import DropdownButton from './DropdownButton';
@ -21,6 +23,9 @@ export function SortDropdownButton<SortField>({
onSortSelect,
}: OwnProps<SortField>) {
const [isUnfolded, setIsUnfolded] = useState(false);
const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
captureHotkeyTypeInFocusState,
);
const [isOptionUnfolded, setIsOptionUnfolded] = useState(false);
@ -36,8 +41,9 @@ export function SortDropdownButton<SortField>({
const resetState = useCallback(() => {
setIsOptionUnfolded(false);
setCaptureHotkeyTypeInFocus(false);
setSelectedSortDirection('asc');
}, []);
}, [setCaptureHotkeyTypeInFocus]);
return (
<DropdownButton
@ -53,6 +59,7 @@ export function SortDropdownButton<SortField>({
key={index}
onClick={() => {
setSelectedSortDirection(option);
setCaptureHotkeyTypeInFocus(false);
setIsOptionUnfolded(false);
}}
>
@ -73,6 +80,7 @@ export function SortDropdownButton<SortField>({
key={index + 1}
onClick={() => {
setIsUnfolded(false);
setCaptureHotkeyTypeInFocus(false);
onSortItemSelect(sort);
}}
>