isClearable with custom click check outside the component useRef

[yuliya1223]

Hi community,
I don't understand what's wrong in my code. when the user clicks on X (isClearable props) inside the select component to clear the list of selected values, then instead of clearing the values, my component simply collapses, because select thinks that the click is happening OUTSIDE the component. Although this element is inside the select. Please tell me how to fix this behavior? Example of my component

 const MyComp = ({...props})=>{
  onCancel =()={}
  const ref = useRef(null)

  useEffect(() => {
    const listener = event => {
      if (ref.current && !ref.current.contains(event.target)) {
        onCancel()
      }
    }
    document.addEventListener('mousedown', listener)
    document.addEventListener('touchstart', listener)
    return () => {
      document.removeEventListener('mousedown', listener)
      document.removeEventListener('touchstart', listener)
    }
  }, [onCancel, ])
 
return (
<div ref={ref}>  // if you remove this ref then isClearable will work correctly
...
<Select
              {...rest}
              value={initialValue}
              placeholder={placeholder}
              onChange={onChangeSelect}
              isClearable
              menuIsOpen={menuIsOpen}
            />
</div>
)}

Thanks!

[dmitryfcz]

I encountered the same problem when clicking on the clear button closed the modal window where the select was located.

Adding stopPropagation to the onMouseDown and onTouchStart events for the wrapper helped.

<div
  onMouseDown={e => e.stopPropagation()}
  onTouchStart={e => e.stopPropagation()}
>
    <Select
        isClearable
        value={value}
        onChange={onChange}
        options={options}
    />
</div>