fix: fix click outside within Shadow DOM #5310

meriouma · 2025-01-09T02:56:31Z

Description

Linked issue: #5149

Problem
Calendar not clickable when wrapped with shadow-dom

Changes

To reviewers

The new test fails when removing the changes to click_outside_wrapper

Contribution checklist

I have followed the contributing guidelines.
I have added sufficient test coverage for my changes.
I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

pullrequest

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:

Comments posted to any areas of potential concern or improvement.
Detailed feedback or actions needed to resolve issues that are found.
Turnaround times vary, but we aim to be swift.

@meriouma you can click here to see the review status or cancel the code review job.

pullrequest

PullRequest Breakdown

Reviewable lines of change

+ 75
- 3

82% TSX (tests)
17% TSX
1% JSON

Generated lines of change

+ 1,943
- 3,034

Type of change

Fix - These changes are likely to be fixing a bug or issue.

pullrequest · 2025-01-09T03:23:57Z

.yarn/releases/yarn-4.6.0.cjs

In my experience yarn is installed. I've never seen it included in this manner.

Jacob

pullrequest

I imagine yarn not being vendored in this manner is not an issue given that it hasn't come up before; I have personally never seen it done this way.

Jacob

Reviewed with ❤️ by PullRequest

pullrequest · 2025-01-09T03:23:59Z

src/test/datepicker_test.test.tsx

+      </ShadowRoot>,
+    );
+
+    await userEvent.click(instance!.input!);


ISSUE: @typescript-eslint/no-non-null-assertion (Severity: Low)
Forbidden non-null assertion.

Remediation:
I understand this is in tests, but let's avoid this if possible.

🤖 powered by PullRequest Automation 👋 verified by Jacob

I believe I changed it to how it's done in other tests now.

codecov · 2025-01-09T06:54:52Z

Codecov Report

Attention: Patch coverage is 96.15385% with 1 line in your changes missing coverage. Please review.

Project coverage is 96.92%. Comparing base (b640106) to head (c011c76).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
src/click_outside_wrapper.tsx	87.50%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5310      +/-   ##
==========================================
- Coverage   96.93%   96.92%   -0.01%     
==========================================
  Files          29       30       +1     
  Lines        3390     3413      +23     
  Branches     1416     1425       +9     
==========================================
+ Hits         3286     3308      +22     
- Misses        102      103       +1     
  Partials        2        2

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

![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123) <h3>Snyk has created this PR to upgrade react-datepicker from 8.0.0 to 8.1.0.</h3> :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project. <hr/> - The recommended version is **1 version** ahead of your current version. - The recommended version was released **22 days ago**. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>react-datepicker</b></summary> <ul> <li> <b>8.1.0</b> - <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.1.0">2025-02-17</a></br><h2>What's Changed</h2> <ul> <li>Fix <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2730594768" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5274" data-hovercard-type="issue" data-hovercard-url="/Hacker0x01/react-datepicker/issues/5274/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/issues/5274">#5274</a>: 🐛 Auto refresh the input value with the previously entered valid value if any invalid value is entered (when the open state is closed) by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/balajis-qb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2856011361" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5417" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5417/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5417">#5417</a></li> <li>Fix: Make CalendarIconProps.icon optional to prevent type error by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jingjing2222/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2844544321" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5406" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jingjing2222/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2844544321" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5406" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li> </ul> <p><strong>Full Changelog</strong>: <a class="commit-link" href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v8.0.0...v8.1.0"><tt>v8.0.0...v8.1.0</tt></a></p> </li> <li> <b>8.0.0</b> - <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.0.0">2025-01-31</a></br><h2>Breaking changes</h2> <ul> <li>fix: Inconsistent/broken behavior in <code>parseDate</code> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/laug/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/laug">@ laug</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2470564504" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5036" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5036/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5036">#5036</a></li> </ul> <h2>Other changes</h2> <ul> <li>🚨 Fix TypeScript Linting warnings for React 19 upgrade by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/balajis-qb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2770364520" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5301" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5301/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5301">#5301</a></li> <li>Upgrade to React 19 by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/martijnrusschen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2770234268" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5300" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5300/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5300">#5300</a></li> <li>fix: fix click outside within Shadow DOM by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/meriouma/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/meriouma">@ meriouma</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2776725692" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5310" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li> <li>Fix condition preventing props.onFocus execution by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dshster/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/dshster">@ dshster</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2784453093" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5315" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li> <li>chore(deps): upgrade date-fns to v4.1.0 by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/paolostyle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/paolostyle">@ paolostyle</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800207617" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5326" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li> <li>Fix deprecation warning hljs by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/martijnrusschen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800232085" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5329" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5329/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5329">#5329</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/meriouma/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/meriouma">@ meriouma</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2776725692" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5310" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dshster/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/dshster">@ dshster</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2784453093" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5315" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/paolostyle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/paolostyle">@ paolostyle</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800207617" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5326" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/iskkiri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/iskkiri">@ iskkiri</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2820255279" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5365" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5365/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5365">#5365</a></li> </ul> <p><strong>Full Changelog</strong>: <a class="commit-link" href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v7.6.0...v8.0.0"><tt>v7.6.0...v8.0.0</tt></a></p> </li> </ul> from <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases">react-datepicker GitHub release notes</a> </details> </details> --- > [!IMPORTANT] > > - Check the changes in this PR to ensure they won't cause issues with your project. > - This PR was automatically created by Snyk using the credentials of a real user. --- **Note:** _You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs._ **For more information:** <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI5YmVkMGE3MS0yMzA3LTQ4NDgtYTk1OS02NTNhOTA1M2E3NjMiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjliZWQwYTcxLTIzMDctNDg0OC1hOTU5LTY1M2E5MDUzYTc2MyJ9fQ==" width="0" height="0"/> > - 🧐 [View latest project report](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 📜 [Customise PR templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template) > - 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?pkg=react-datepicker&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades) [//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react-datepicker","from":"8.0.0","to":"8.1.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"9bed0a71-2307-4848-a959-653a9053a763","prPublicId":"9bed0a71-2307-4848-a959-653a9053a763","packageManager":"npm","priorityScoreList":[],"projectPublicId":"e27b08aa-e5d2-4b10-8303-630a69d0b669","projectUrl":"https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":1,"publishedDate":"2025-02-17T20:53:33.623Z"},"vulns":[]}'

pullrequest bot reviewed Jan 9, 2025

View reviewed changes

.yarn/releases/yarn-4.6.0.cjs Outdated

Copy link

pullrequest bot Jan 9, 2025

Choose a reason for hiding this comment

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

In my experience yarn is installed. I've never seen it included in this manner.

Jacob

pullrequest bot reviewed Jan 9, 2025

View reviewed changes

fix: fix click outside within Shadow DOM (Hacker0x01#5149)

dcd3eb4

meriouma force-pushed the fix-shadow-dom branch from 5fb8321 to dcd3eb4 Compare January 9, 2025 03:29

fixup! fix: fix click outside within Shadow DOM (Hacker0x01#5149)

c011c76

pullrequest bot approved these changes Jan 10, 2025

View reviewed changes

martijnrusschen merged commit 6c6e8d4 into Hacker0x01:main Jan 10, 2025
4 of 6 checks passed

meriouma deleted the fix-shadow-dom branch January 10, 2025 17:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: fix click outside within Shadow DOM #5310

fix: fix click outside within Shadow DOM #5310

Uh oh!

meriouma commented Jan 9, 2025

Uh oh!

pullrequest bot left a comment

Uh oh!

pullrequest bot left a comment •

edited

Loading

Uh oh!

pullrequest bot Jan 9, 2025

Uh oh!

pullrequest bot left a comment

Uh oh!

pullrequest bot Jan 9, 2025

Uh oh!

meriouma Jan 9, 2025

Uh oh!

codecov bot commented Jan 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: fix click outside within Shadow DOM #5310

fix: fix click outside within Shadow DOM #5310

Uh oh!

Conversation

meriouma commented Jan 9, 2025

Description

To reviewers

Contribution checklist

Uh oh!

pullrequest bot left a comment

Choose a reason for hiding this comment

Uh oh!

pullrequest bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

PullRequest Breakdown

Uh oh!

pullrequest bot Jan 9, 2025

Choose a reason for hiding this comment

Uh oh!

pullrequest bot left a comment

Choose a reason for hiding this comment

Uh oh!

pullrequest bot Jan 9, 2025

Choose a reason for hiding this comment

🤖 powered by PullRequest Automation 👋 verified by Jacob

Uh oh!

meriouma Jan 9, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pullrequest bot left a comment •

edited

Loading

codecov bot commented Jan 9, 2025 •

edited

Loading