CultureHQ / add-to-calendar

A small package for adding an event to a calendar.
https://engineering.culturehq.com/add-to-calendar/
MIT License
44 stars 26 forks source link

document onClick event triggers too soon and prevents the dropdown from even opening #601

Open Avasam opened 3 years ago

Avasam commented 3 years ago

Hi! šŸ‘‹

Firstly, thanks for your work on this project! šŸ™‚

Today I used patch-package to patch @culturehq/add-to-calendar@1.1.2 for the project I'm working on.

In some cases, the onClick event that is added to the document is triggered at the same time that I click on the button to open the dropdown, resulting in it immediately closing again (before it even has time to render). In effect this prevents the dropdown menu from even opening.

In my case, this is happening when I open a Select from Material-UI, then navigate (using react-router-dom) to the page containing my AddToCalendar element.

My project: https://github.com/Avasam/speedrun.com_global_scoreboard_webapp/tree/f51b522dd6f33d8cc146c3b3b0d53c1baf52f2bf (this is at the current latest commit which does contain the issue) Live example on my dev server: https://avasamdev.pythonanywhere.com/tournament-scheduler/register/5-f5c44dd3-4800-4778-ae7f-249a7c958acd

How to replicate:

  1. Navigate to the given link
  2. Open the dropdown (no need to enter any information)
  3. Click on the Click here to view the current registrations link
    (Filling any information and click "Sign Me/Us up!" would result in the same behaviour)
  4. Watch the dropdown not work

If you skip step 2. It'll work.

Here is the diff that solved my problem: Of course this isn't an actual fix, just a workaround. And I do loose the ability to close the dropdown from clicking outside it

diff --git a/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js b/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
index 418e2d6..c6ef105 100644
--- a/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
+++ b/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
@@ -45,7 +45,7 @@ var useOpenState = function (initialOpen) {
     react_1.useEffect(function () {
         if (open) {
             var onClose_1 = function () { return setOpen(false); };
-            document.addEventListener("click", onClose_1);
+            // document.addEventListener("click", onClose_1);
             return function () { return document.removeEventListener("click", onClose_1); };
         }
         return undefined;

This issue body was partially generated by patch-package.