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.

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

[core] refactor(Popover): improve popover captureDismiss mechanism #4328

Merged
merged 2 commits into from
Sep 21, 2020

Conversation

ejose19
Copy link
Contributor

@ejose19 ejose19 commented Sep 10, 2020

Fixes #2820

Checklist

  • Update documentation

Changes proposed in this pull request:

  • Add a new popover class that will be used to determine when a popover is using captureDismiss
  • Add a new popover private property to hold the popover ref
  • Remove dependency of preventDefault/defaultPrevented and instead use a more self contained approach to determine whether the popover should close in the presence of captureDismiss

@ejose19 ejose19 changed the title refactor: improve popover capture dismiss mechanism [core] refactor(Popover): improve popover captureDismiss mechanism Sep 10, 2020
Copy link
Contributor

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

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

overall looks like a reasonable approach

packages/core/src/components/popover/popover.tsx Outdated Show resolved Hide resolved
packages/core/src/components/popover/popover.tsx Outdated Show resolved Hide resolved
@ejose19
Copy link
Contributor Author

ejose19 commented Sep 10, 2020

@adidahiya Thanks for the review, I run tests locally and completely forgot about react 15. Is there an script for running tests with that configuration?

// an OVERRIDE inside a DISMISS does not dismiss, and a DISMISS inside an OVERRIDE will dismiss.
const dismissElement = eventTarget.closest(`.${Classes.POPOVER_DISMISS}, .${Classes.POPOVER_DISMISS_OVERRIDE}`);
const shouldDismiss = dismissElement != null && dismissElement.classList.contains(Classes.POPOVER_DISMISS);
const isDisabled = eventTarget.closest(`:disabled, .${Classes.DISABLED}`) != null;
if (shouldDismiss && !isDisabled && !e.isDefaultPrevented()) {
if (shouldDismiss && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
Copy link
Contributor

Choose a reason for hiding this comment

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

is isDisabled still relevant here? Not sure if the check was to avoid preventDefault on an event that should not have been touched, or if we genuinely didn't want to close the popover if its target is disabled

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm pretty sure it's redundant, since a disabled element can't emit a click event. However I don't know if any blueprint component only uses disabled class but doesn't respect that rule (I checked anchor button and they do respect not triggering onClick) if there's no element which applies disabled class and allow clicking I can remove that too.

@adidahiya
Copy link
Contributor

@ejose19 yes, it is possible to run those tests by setting an environment variable in your shell: REACT=15 before running yarn test and related test scripts.

@adidahiya
Copy link
Contributor

docs preview build

Copy link
Contributor

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

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

thanks @ejose19

@adidahiya adidahiya merged commit 8efdbcd into palantir:develop Sep 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Classes.POPOVER_DISMISS is not working with <Link /> (react-router-dom) in Popover
3 participants