airbnb/react-outside-click-handler

Doesn't work in the Shadow DOM

rsuwa opened this issue · 3 comments

rsuwa commented

I'm adding an element under the shadow root in the chrome extension, but in that case, the element in the shadow DOM is determined to be outside.

How can I deal with this problem?

I'm not sure what you mean; can you share some code?

Either way, this component works based on event bubbling, and I suspect events won't bubble past a shadow DOM boundary.

rsuwa commented

Sorry for the lack of explanation.

I need to use the shadow DOM to create the chrome extension, and I use react-shadow to do this.

import React, { useState, useEffect } from 'react';
import root from 'react-shadow';
import OutsideClickHandler from 'react-outside-click-handler';
import { Component } from './component';

const App = () => {
  return (
    <root.div>
      <OutsideClickHandler
        onOutsideClick={() => {
          // e.g.) close component
        }}
      >
        <Component />
      </OutsideClickHandler>
    </root.div>
  );
};

If the code looks like the above, I want onOutSideClick to be executed when you click outside of the Component.

I don't think that's possible; OutsideClickHandler works via event bubbling, and the shadow DOM (i believe) disrupts that.

In other words, you'd have to, totally separately, install a click listener on the outer document body (ie, conceptually "wrap" it with OutsideClickHandler).