Item click inside FilterableMultiSelect not working in shadow DOM

[hima2912]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @carbon/[email protected] for the project I'm working on.

Item click inside the FilterableMultiSelect dropdown is not working in shadow DOM as the downshiftProps is not passed to the downshift useCombobox hook

Here is the diff that solved my problem:

diff --git a/node_modules/@carbon/react/es/components/MultiSelect/FilterableMultiSelect.js b/node_modules/@carbon/react/es/components/MultiSelect/FilterableMultiSelect.js
index 2375887..d19eed0 100644
--- a/node_modules/@carbon/react/es/components/MultiSelect/FilterableMultiSelect.js
+++ b/node_modules/@carbon/react/es/components/MultiSelect/FilterableMultiSelect.js
@@ -262,7 +262,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     stateReducer,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...downshiftProps
   });
   function stateReducer(state, actionAndChanges) {
     const {

This issue body was partially generated by patch-package.

[kubijo]

It would seem to me that the FlatPickr instances used in DatePicker have the same issue... Have you also bumped into that one?

---

EDIT: Found the issue.

It's because you bind your events through document global and don't allow supplying a different target (like Downshift does).

1. document.addEventListener
2. !calendarRef.current.calendarContainer.contains(event.target)

Since shadow DOM events get re-targeted to the host element, the calendarContainer.contains(event.target) check fails (my calendar container is in shadow DOM).

---

I apologize for the direct ping @joshblack, but this is now blocking my progress on a thing that I'm supposed to present next Monday, and you seem to be on top of the things here and moving them along… Do you need a new issue created?

While this is about a different component, the core of the issue is the same, namely event handling in shadow DOM.
What is different with this one is that here the issue is clearly in your code, not the 3rd party.

As for the solution, two options come to mind:

• allow passing in extra environment prop like Downshift does
• use appendTo when it's provided
• add an option for a user-provided function that can do additional checking on the event and prevent the closing

The first two options might prove rather more complex than what it seems like on the surface because you do want to close on outside clicks across the shadow DOM boundary… 🤔

There is event.originalTarget, but it's sadly a firefox-only non-standard property.

[kubijo]

Aha! Reading a bit on event retargeting got me a really useful pointer to a nifty method of Event.composedPath.

When I invoke that on the aforementioned mouseDown event handler, this is what I get:

This means that the fix should be trivially simple ... replace event.target by event.composedPath()[0].