fix(base): close view popovers on Escape regardless of focus; drop redundant property switch tab stop

This commit is contained in:
Philipinho
2026-06-15 05:23:19 +01:00
parent 1b5c081e1e
commit 07bfa3ba73
4 changed files with 23 additions and 0 deletions
@@ -24,6 +24,7 @@ import {
} from "@/ee/base/property-types/property-type.registry";
import { FilterPersonInput } from "./filter-person-input";
import { FilterDateInput } from "./filter-date-input";
import { useEscapeClose } from "@/ee/base/hooks/use-escape-close";
import viewClasses from "@/ee/base/styles/views.module.css";
const OPERATORS: { value: FilterOperator; labelKey: string }[] = [
@@ -191,6 +192,7 @@ export function ViewFilterConfigPopover({
children,
}: ViewFilterConfigProps) {
const { t } = useTranslation();
useEscapeClose(opened, onClose);
const propertyOptions = properties.map((p) => ({
value: p.id,
@@ -4,6 +4,7 @@ import { Table } from "@tanstack/react-table";
import { IBaseRow, IBaseProperty } from "@/ee/base/types/base.types";
import { propertyTypes } from "@/ee/base/property-types/property-type.registry";
import { useTranslation } from "react-i18next";
import { useEscapeClose } from "@/ee/base/hooks/use-escape-close";
import cellClasses from "@/ee/base/styles/cells.module.css";
import viewClasses from "@/ee/base/styles/views.module.css";
@@ -25,6 +26,7 @@ export function ViewPropertyVisibility({
children,
}: ViewPropertyVisibilityProps) {
const { t } = useTranslation();
useEscapeClose(opened, onClose);
const columns = useMemo(() => {
return table
@@ -122,6 +124,9 @@ export function ViewPropertyVisibility({
return (
<UnstyledButton
key={col.id}
role="switch"
aria-checked={isVisible}
aria-disabled={!canHide || undefined}
className={cellClasses.menuItem}
onClick={() => {
if (canHide) {
@@ -140,6 +145,8 @@ export function ViewPropertyVisibility({
size="xs"
checked={isVisible}
disabled={!canHide}
tabIndex={-1}
aria-hidden
onChange={() => {}}
// Clicking the track synthesizes a second click on the hidden input which bubbles
// to UnstyledButton, firing handleToggle twice. stopPropagation blocks only that
@@ -15,6 +15,7 @@ import {
ViewSortConfig,
} from "@/ee/base/types/base.types";
import { useTranslation } from "react-i18next";
import { useEscapeClose } from "@/ee/base/hooks/use-escape-close";
import viewClasses from "@/ee/base/styles/views.module.css";
type ViewSortConfigProps = {
@@ -35,6 +36,7 @@ export function ViewSortConfigPopover({
children,
}: ViewSortConfigProps) {
const { t } = useTranslation();
useEscapeClose(opened, onClose);
const [draft, setDraft] = useState<ViewSortConfig | null>(null);
useEffect(() => {
@@ -0,0 +1,12 @@
import { useEffect } from "react";
export function useEscapeClose(opened: boolean, onClose: () => void) {
useEffect(() => {
if (!opened) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && !e.defaultPrevented) onClose();
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [opened, onClose]);
}