Why is svg not identified inside a node using .contain method using javascript?

Question

i want to identify the click outside a div element and close the dropdown menu based on it. However, clicking the svg element inside the div element (containing input element and svg) would identify it as click outside div element. Not sure how to solve it. I have tried using css trick as below,

button > * {
    pointer-events: none;
}

But it didnt work as well.

What i am trying to do ?

I have a form input element. within that i have a input with dropdown with up and down svgs. so when i click the svg down it identifies it as document click.

class Parent extends React.PureComponent {
    state = {
        opened: false,
    };

    componentDidMount(){
        document.addEventListener('click', this.handle_document_click);
    }

    arrow_up_click = (e) => {
        e.stopPropagation();
        e.PreventDefault();
    }
    arrow_down_click = (e) => {
        e.stopPropagation();
        e.PreventDefault();
    }

    handle_document_click = () => {
        if (this.input_ref.current && 
            this.input_ref.current.contains(e.target)) {
                return;
        }
        this.setState({opened: false});
    };

    render = () => {
        return (
            <form onsubmit={handle_submit}>
                <div ref={this.input_ref}>
                    <input/>
                    <button>
                        {state.opened && <SvgUp height="22" width="22"/ 
                        onClick={arrow_up_click}>}
                        {!state.opened && <SvgDown height="22" 
                        width="22" onClick={arrow_down_click}/>}
                    </button>
               </div>
            </form>
        )
    }
}

Could someone help me fix this. I want the click on svg to not to be identified as document click. Thanks.

Answer 1

You change the SVG icon depending on the state on the component. When the event of the SVG you swapped out reaches the event handler it is no longer "contained" in the div.

Found the answer in this very similar question: Why a click on svg element is not captured by node contains method?

That means that you do not have to disable pointer-events for all SVG:s but just have to wrap the components that are swapped out with a div containing a css class with pointer-events: none;.