e.stopPropagation() and dropdown about react

[urmybestfriend]

You can make another wrapper class

[peipei818]

@urmybestfriend What is the reason? I don't understand what should I do.

[d8corp]

I have a problem, think it relates to the issue.

I expect to get "SUCCESS??????????" alert message on click the button, but it's not happening.

import { useEffect, useRef } from "react";

export function App() {
  const root = useRef<HTMLDivElement>()

  useEffect(() => {
    const div = root.current

    if (div) {
      const listener = (e: Event) => {
        e.stopPropagation()
      }
  
      div.addEventListener('click', listener)
  
      return () => {
        div.removeEventListener('click', listener)
      }
    }
  }, [])

  const handleClick = () => {
    alert('SUCCESS??????????')
  }

  return (
    <div ref={root as any}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

https://codesandbox.io/s/blissful-architecture-9kdnqn