diff --git a/libs/shared/ui/src/lib/components/menu/menu.tsx b/libs/shared/ui/src/lib/components/menu/menu.tsx index b72ad17193b..b6156adaa99 100644 --- a/libs/shared/ui/src/lib/components/menu/menu.tsx +++ b/libs/shared/ui/src/lib/components/menu/menu.tsx @@ -92,7 +92,7 @@ export function Menu(props: MenuProps) { } = props const ref = useRef(null) - const [isOpen, setOpen] = useState(undefined) + const [isOpen, setOpen] = useState(open) // XXX: https://github.com/szhsin/react-menu/blob/d7c4df8a4324847403990174d9298038e11ac0c2/src/hooks/useClick.js const [skipOpen] = useState<{ v?: boolean }>({}) @@ -150,7 +150,9 @@ export function Menu(props: MenuProps) { } useEffect(() => { - setOpen((previousOpen) => (previousOpen === undefined && open === false ? undefined : open)) + if (open !== undefined) { + setOpen(open) + } window.addEventListener('resize', closeMenu) window.addEventListener('scroll', closeMenu) return () => { diff --git a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx index a5edece3b61..937570a4c35 100644 --- a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx +++ b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx @@ -7,6 +7,7 @@ import Icon from '../../icon/icon' import { type TableFilterProps } from '../table' const ALL = 'ALL' +const REACT_DATEPICKER_IGNORE_ON_CLICK_OUTSIDE = 'react-datepicker-ignore-onclickoutside' export interface SelectedTimestamps { automaticallySelected: boolean @@ -60,7 +61,7 @@ export function TableHeadDatePickerFilter({ // Called when timestamp has been defined const onChangeTimestamp = (startDate: Date, endDate: Date) => { - setIsOpenTimestamp(!isOpenTimestamp) + setIsOpenTimestamp(false) setHasFilter(true) setFilter((prev) => [ ...prev.filter( @@ -80,6 +81,7 @@ export function TableHeadDatePickerFilter({ // Called to clear the timestamp filter const cleanFilter = (event: MouseEvent) => { event.preventDefault() + event.stopPropagation() setFilter((prev) => [ ...prev.filter( (currentValue) => currentValue.key !== fromTimestampProperty && currentValue.key !== toTimestampProperty @@ -106,17 +108,17 @@ export function TableHeadDatePickerFilter({ defaultDates={getDefaultDates(datePickerData.timestamps)} showDateTimeInputs useLocalTime - onClickOutside={() => setIsOpenTimestamp(!isOpenTimestamp)} + onClickOutside={() => setIsOpenTimestamp(false)} maxRangeInDays={datePickerData.maxRangeInDays} > -
+
{hasFilter ? (