Allow data-toggle="dropdown" and form click events to bubble #32942

@caseyjhol Can you please add a test case to check that the dropdown should be shown when clicking on a child element of data-bs-toggle="dropdown" 🙂

Also, I believe that #33044 can be fixed in the same PR

caseyjhol · 2021-02-21T20:56:15Z

js/src/dropdown.js

-          dropdownMenu.contains(event.target)) {
-        continue
+      if (event) {
+        if (context._element === SelectorEngine.parents(event.target, SELECTOR_DATA_TOGGLE)[0]) {


@rohit2sharma95 I also need to compare context._element with event.target to ensure clicks on the button itself toggle the menu, but that increases the complexity to 21, causing eslint to fail. Any ideas?

It's a warning, although it'd be nice to not have it. We should try to move some logic outside of clearMenus() at some point

I switched to event.composedPath().includes(context._element) instead. composedPath seems to be standard in modern browsers (https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath), but let me know if you'd prefer I switch back.

Not against this if it's supported but perhaps we should make that change in a separate PR in case other compononents can use it? https://caniuse.com/?search=composedPath

The alternative would be something like:

if (context._element === event.target || context._element === SelectorEngine.parents(event.target, SELECTOR_DATA_TOGGLE)[0] || dropdownForm === event.target || dropdownForm === SelectorEngine.parents(event.target, SELECTOR_FORM_CHILD)[0]) { ... }

Could we maybe merge this as is and then open another issue addressing using composedPath in other places where it would make sense?

caseyjhol · 2021-03-13T13:58:41Z

@rohit2sharma95 @XhmikosR Any more thoughts/comments?

XhmikosR · 2021-03-16T08:18:06Z

@caseyjhol can you please make a proper rebase?

@RyanBerliner could you have a quick look please?

js/src/dropdown.js

rohit2sharma95 · 2021-03-17T04:36:32Z

Tests for form inside menu can be left less strict, those will be updated in #33389.

rohit2sharma95

@caseyjhol Can you please address few last comments? Only you can edit this PR 🙂

js/src/dropdown.js

js/tests/unit/dropdown.spec.js

rohit2sharma95 · 2021-03-18T04:26:48Z

js/tests/unit/dropdown.spec.js

+    btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
+      expect(btnDropdown.classList.contains('show')).toEqual(true)
+      expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
+      done()
+    }))


setTimeout is not required here IMO

The test wasn't working properly for me (locally) without the setTimeout (it was passing when it shouldn't).

Do you want me to remove all code related to checking for the form (with the idea being users should set clickableMenu instead of Bootstrap detecting the presence of a form)?

Do you want me to remove all code related to checking for the form

No, that should be handled in the next PR.

caseyjhol · 2021-03-19T00:27:41Z

Sorry - not sure what happened when I was rebasing...getting this sorted.

rohit2sharma95

@caseyjhol Please remove all newly added setTimeouts from tests. They are not needed in real 😄

LGTM 👍 (There are new updates in the next PR though)
Expecting one more approval from @twbs/js-review

caseyjhol · 2021-03-22T23:19:38Z

js/src/dropdown.js

+        if ([context._element].some(element => event.composedPath().includes(element))) {
+          continue
+        }


@rohit2sharma95 I'm concerned that removing the setTimeouts might affect the reliability of the tests. If I remove this section of code (preventing the menu from opening), both the "data-api -> should show and hide a dropdown" and "should open the dropdown when clicking the child element inside data-bs-toggle="dropdown"" tests pass. With the setTimeouts, they fail.

In any case, I'm eager to get this merged in, so I've gone ahead and removed the setTimeouts, but I urge you to check into it. If you still feel they're not necessary, if you get a chance, I'd love to know the reasoning. Thanks for all your help getting this feature implemented!

Okay, for smooth release please restore setTimeouts and rebase your branch 🙂

XhmikosR · 2021-03-23T08:55:30Z

@caseyjhol you are rebasing against the wrong remote plus I don't have rights to edit your branch because you are using an org fork I presume. Anyway, I pushed the branch upstream temporarily https://github.com/twbs/bootstrap/compare/bubble-click-events to see if BrowserStack passes too.

As for the setTimeouts, not sure what to do since both seem to work since tests pass? We can keep the setTimeouts for now and see if they are really needed later, because I'd like to land this patch in beta3 which we plan to release later today :)

caseyjhol requested a review from a team as a code owner January 30, 2021 19:46

XhmikosR added the has conflicts label Jan 30, 2021

caseyjhol added 2 commits January 30, 2021 12:49

remove stopPropagation from button click event

40a206f

add test for click events

9048cf5

caseyjhol force-pushed the bubble-click-events branch from 8f87857 to 9048cf5 Compare January 30, 2021 19:52

XhmikosR added backport-to-v4 js v4 v5 and removed has conflicts labels Jan 30, 2021

caseyjhol added 3 commits January 31, 2021 09:58

ensure menu can open

a7c2013

test for delegated click events

7fc8ee9

Merge branch 'main' into bubble-click-events

160af31

rohit2sharma95 reviewed Feb 21, 2021

View reviewed changes

js/tests/unit/dropdown.spec.js Outdated Show resolved Hide resolved

XhmikosR mentioned this pull request Feb 21, 2021

Dropdown - don't stop event propagation #32943

Closed

caseyjhol added 4 commits February 21, 2021 12:47

Merge branch 'main' into bubble-click-events

a87e814

simplify delegated click event bubble test

cdb5f3c

rearrange test

1b4d5dd

ensure button children can open menu

65e254e

caseyjhol commented Feb 21, 2021

View reviewed changes

caseyjhol added 2 commits February 21, 2021 14:03

test to ensure clicking button opens the menu

eea7b9c

check current element and parents

cdbd74d

XhmikosR added the has conflicts label Feb 22, 2021

caseyjhol added 2 commits February 27, 2021 12:53

improve menu open tests

8156318

Merge branch 'main' into bubble-click-events

d5e67c6

XhmikosR reviewed Mar 16, 2021

View reviewed changes

js/src/dropdown.js Outdated Show resolved Hide resolved

RyanBerliner reviewed Mar 17, 2021

View reviewed changes

js/src/dropdown.js Show resolved Hide resolved

rohit2sharma95 mentioned this pull request Mar 17, 2021

Dropdown — Add option to make the dropdown menu clickable #33389

Merged

rohit2sharma95 requested changes Mar 18, 2021

View reviewed changes

caseyjhol added 2 commits March 18, 2021 07:57

Merge branch 'main' into bubble-click-events

b5f3d91

refactor/add comments

f08dae5

caseyjhol force-pushed the bubble-click-events branch from b5f3d91 to aa1902c Compare March 19, 2021 00:01

caseyjhol requested a review from a team as a code owner March 19, 2021 00:01

caseyjhol force-pushed the bubble-click-events branch from 2c4455b to ccfe261 Compare March 19, 2021 00:21

caseyjhol force-pushed the bubble-click-events branch from fc3ba6c to f08dae5 Compare March 19, 2021 00:33

caseyjhol added 3 commits March 18, 2021 18:33

Merge branch 'main' into bubble-click-events

4572f81

remove extra test to check if menu is open

9396b1b

remove form test

bbe928b

rohit2sharma95 approved these changes Mar 22, 2021

View reviewed changes

GeoSot approved these changes Mar 22, 2021

View reviewed changes

caseyjhol added 2 commits March 22, 2021 16:14

Merge branch 'main' into bubble-click-events

b12081c

remove setTimeouts from tests

be87106

caseyjhol commented Mar 22, 2021

View reviewed changes

XhmikosR mentioned this pull request Mar 23, 2021

Allow data-toggle="dropdown" and form click events to bubble #33442

Merged

XhmikosR closed this in #33442 Mar 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow data-toggle="dropdown" and form click events to bubble #32942

Allow data-toggle="dropdown" and form click events to bubble #32942

caseyjhol commented Jan 30, 2021 •

edited

Loading

caseyjhol commented Jan 30, 2021

rohit2sharma95 commented Jan 31, 2021

caseyjhol commented Jan 31, 2021 •

edited

Loading

thijndehaas commented Feb 15, 2021

rohit2sharma95 left a comment

XhmikosR commented Feb 21, 2021

rohit2sharma95 commented Feb 21, 2021 •

edited

Loading

caseyjhol Feb 21, 2021

XhmikosR Feb 21, 2021

caseyjhol Feb 22, 2021 •

edited

Loading

XhmikosR Feb 27, 2021

caseyjhol Feb 27, 2021

caseyjhol commented Mar 13, 2021

XhmikosR commented Mar 16, 2021

rohit2sharma95 commented Mar 17, 2021

rohit2sharma95 left a comment

rohit2sharma95 Mar 18, 2021

caseyjhol Mar 18, 2021 •

edited

Loading

rohit2sharma95 Mar 22, 2021

caseyjhol commented Mar 19, 2021

rohit2sharma95 left a comment

caseyjhol Mar 22, 2021

rohit2sharma95 Mar 23, 2021

XhmikosR commented Mar 23, 2021

Allow data-toggle="dropdown" and form click events to bubble #32942

Allow data-toggle="dropdown" and form click events to bubble #32942

Conversation

caseyjhol commented Jan 30, 2021 • edited Loading

caseyjhol commented Jan 30, 2021

rohit2sharma95 commented Jan 31, 2021

caseyjhol commented Jan 31, 2021 • edited Loading

thijndehaas commented Feb 15, 2021

rohit2sharma95 left a comment

Choose a reason for hiding this comment

XhmikosR commented Feb 21, 2021

rohit2sharma95 commented Feb 21, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

caseyjhol Feb 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

caseyjhol commented Mar 13, 2021

XhmikosR commented Mar 16, 2021

rohit2sharma95 commented Mar 17, 2021

rohit2sharma95 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

caseyjhol Mar 18, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

caseyjhol commented Mar 19, 2021

rohit2sharma95 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

XhmikosR commented Mar 23, 2021

caseyjhol commented Jan 30, 2021 •

edited

Loading

caseyjhol commented Jan 31, 2021 •

edited

Loading

rohit2sharma95 commented Feb 21, 2021 •

edited

Loading

caseyjhol Feb 22, 2021 •

edited

Loading

caseyjhol Mar 18, 2021 •

edited

Loading