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

fix(module:cascader,select,time-picker,tooltip,tree-select): take in account shadow dom when getting the target of an event #7853

Merged
merged 2 commits into from
Jun 2, 2024

Conversation

Lukinoh
Copy link
Contributor

@Lukinoh Lukinoh commented Feb 27, 2023

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

If you have an ant component inside a ShadowDOM the function onClickOutside won't behave correctly.

I did a small stackblitz to showcase the issue.
You have 2 selects: One inside a ShadowDOM, and one without ShadowDOM.
If you spam click the select in the ShadowDOM version you will see that the list will appear twice, which is not the case with the one not using the ShadowDOM.
firefox_2023-02-27_13-11-15

The issue is due to how event propagation is done with ShadowDOM.
Concretely, the function onClickOutside will receive as a target the ShadowRoot, and not the real clicked element.
To fix the issue you should take into account the ShadowDOM. Fortunately @angular/cdk/platform provides a function that does it which is _getEventTarget.

As a side note, here you have a great article that explain event propagation and shadow dom:
https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/

What is the new behavior?

The behaviour will be exactly the same as today, however you won't have anymore a glitch when using your component inside a ShadowDOM.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

I am not sure how to test this.

use _getEventTarget provided by @angular/cdk/platform to make sure that
the chain of target is not cut by the shadow dom
@zorro-bot
Copy link

zorro-bot bot commented Feb 27, 2023

This preview will be available after the AzureCI is passed.

@codecov
Copy link

codecov bot commented Feb 27, 2023

Codecov Report

Attention: Patch coverage is 90.00000% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 91.55%. Comparing base (710e20e) to head (5b2184e).
Report is 1 commits behind head on master.

Files Patch % Lines
components/time-picker/time-picker.component.ts 50.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7853      +/-   ##
==========================================
- Coverage   91.56%   91.55%   -0.01%     
==========================================
  Files         532      532              
  Lines       18337    18338       +1     
  Branches     2803     2803              
==========================================
  Hits        16790    16790              
- Misses       1229     1230       +1     
  Partials      318      318              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Laffery Laffery changed the title fix: take in account shadow dom when getting the target of an event fix(module:cascader,select,time-picker,tooltip,tree-select): take in account shadow dom when getting the target of an event Jun 2, 2024
Copy link
Collaborator

@Laffery Laffery left a comment

Choose a reason for hiding this comment

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

LGTM

@Laffery Laffery merged commit 843b703 into NG-ZORRO:master Jun 2, 2024
7 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants