Why is "ripple effect" from Material-UI not visible when used in Popup (inside Leaflet map)?

Question

I'm trying to put Material-UI Button inside Popup (Leaflet library). When I'm doing it outside Popup => everything works fine, each button click triggers ripple effect. When I'm trying to put the same code inside marker popup, something destroyes (overrides) ripple style and its's no longer visible.

Is it possible to somehow fix this problem? Here's my codesandbox: https://codesandbox.io/s/react-leaflet-ripple-ivsxy

I have two buttons here:

(1) Outside the popup - works OK

(2) In the popup (popup is visible after click on marker) - button is visible but ripple effect is broken

Answer 1

Regarding why, in Material-UI ripple handler is triggered on mousedown event (from ButtonBase.js):

const handleMouseDown = useRippleHandler('start', onMouseDown);

but in leaflet mousedown event inside popup doesn't propagate outside the map in leaflet and this is by design (refer this thread for some details), that's the reason why ripple effect is missing.

To circumvent this behavior, one option would be to restore mousedown event propagation as demonstrated in the following Popup custom component:

class MyPopup extends Component {
  componentDidMount() {
    const { map } = this.props.leaflet;

    map.on("popupopen", e => {
      L.DomEvent.off(
        this.getWrapper(),
        "mousedown",
        L.DomEvent.stopPropagation
      );
    });
    map.on("popupclose", e => {
      L.DomEvent.on(this.getWrapper(), "mousedown", L.DomEvent.stopPropagation);
    });
  }

  getWrapper() {
    return document.querySelector(".leaflet-popup-content-wrapper");
  }

  render() {
    return <Popup {...this.props} />;
  }
}

Here is an updated CodeSandbox