From df8e4dad404bc0c33e0d9d2d3aabb650c6900b55 Mon Sep 17 00:00:00 2001 From: Ozan Tekin Date: Sat, 21 Sep 2024 23:07:44 +0300 Subject: [PATCH 1/3] fix: resolve global esc key listener conflict in calendar component --- components/lib/calendar/Calendar.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index c1d709f990..72c13ae0bd 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder } from '../hooks/Hooks'; import { CalendarIcon } from '../icons/calendar'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; @@ -24,6 +24,8 @@ export const Calendar = React.memo( const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); const [idState, setIdState] = React.useState(props.id); + const isCloseOnEscape = overlayVisibleState && props.closeOnEscape; + const overlayDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape); const metaData = { props, @@ -39,8 +41,8 @@ export const Calendar = React.memo( callback: () => { hide(); }, - when: overlayVisibleState, - priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, 0] + when: overlayVisibleState && overlayDisplayOrder, + priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder] }); useHandleStyle(CalendarBase.css.styles, isUnstyled, { name: 'calendar' }); @@ -1852,7 +1854,7 @@ export const Calendar = React.memo( setOverlayVisibleState(true); overlayEventListener.current = (e) => { - if (!isOutsideClicked(e)) { + if (!isOutsideClicked(e.target)) { isOverlayClicked.current = true; } }; From f290f05e8a36c4f95370242d813e423ce076edeb Mon Sep 17 00:00:00 2001 From: Ozan Tekin Date: Sun, 22 Sep 2024 15:27:39 +0300 Subject: [PATCH 2/3] fix: remove target in isOutsideClicked --- components/lib/calendar/Calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 72c13ae0bd..70aff53aff 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -1854,7 +1854,7 @@ export const Calendar = React.memo( setOverlayVisibleState(true); overlayEventListener.current = (e) => { - if (!isOutsideClicked(e.target)) { + if (!isOutsideClicked(e)) { isOverlayClicked.current = true; } }; From be737cc52eb3bf13c507bbdcec4b87929fbfc9f8 Mon Sep 17 00:00:00 2001 From: Ozan Tekin Date: Mon, 23 Sep 2024 09:20:51 +0300 Subject: [PATCH 3/3] feat: add visible condition --- components/lib/calendar/Calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 70aff53aff..8ccb7c1adc 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -1854,7 +1854,7 @@ export const Calendar = React.memo( setOverlayVisibleState(true); overlayEventListener.current = (e) => { - if (!isOutsideClicked(e)) { + if (!isOutsideClicked(e) && visible) { isOverlayClicked.current = true; } };