Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #7220: resolve global esc key listener conflict in Calendar component #7228

Merged
merged 3 commits into from
Sep 23, 2024
Merged

fix #7220: resolve global esc key listener conflict in Calendar component #7228

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df8e4da
fix: resolve global esc key listener conflict in calendar component
ozantekin Sep 21, 2024
f290f05
fix: remove target in isOutsideClicked
ozantekin Sep 22, 2024
be737cc
feat: add visible condition
ozantekin Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions components/lib/calendar/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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' });
Expand Down Expand Up @@ -1852,7 +1854,7 @@ export const Calendar = React.memo(
setOverlayVisibleState(true);

overlayEventListener.current = (e) => {
if (!isOutsideClicked(e)) {
if (!isOutsideClicked(e.target)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line looks incorrect as isOutsideClicked takes an event and gets its event.target?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When target is not included, the panel of the first calendar input stays open after making changes in the first input and shifting focus to the second calendar input.

Screen Shot 2024-09-22 at 15 01 01 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK but if you look at the code

const isOutsideClicked = (event) => {
            return elementRef.current && !(elementRef.current.isSameNode(event.target) || isNavIconClicked(event.target) || elementRef.current.contains(event.target) || (overlayRef.current && overlayRef.current.contains(event.target)));
        };

That means if you pass e.target then inside isOutSideClicked they will be calling target.target does that make sense? the Target is a DOM element and it won't have a target property?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the clarification, I missed that detail. I'll remove the target and push the update. Can I address the other issue in a different PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can keep modifying this PR its OK.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noticed missing condition, added a fix to resolve the issue.

isOverlayClicked.current = true;
}
};
Expand Down
Loading