如果单击导致卸载被单击的元素，则Element.contains（）不起作用

Question

我正在开发一个开源下拉菜单React Component，我想使下拉菜单在其外部单击时关闭，它对于内部的所有元素均按预期工作，但是在单击标记的元素时，尽管有下拉菜单的一部分

令人困惑的是导致问题的原因，我认为x图标svg并未被视为下拉组件的子代，但文本“添加另一个值”也使下拉列表关闭，因为它不属于该组件

  const [isOpen, setOpen] = useState(false);
  const [isFocused, setFocus] = useState(false);
  const containerRef = useRef(false);

  // close the dropdown when clicking away
  if (isOpen && containerRef) {
    document.addEventListener('click', function onClickAway(event) {
      const node = containerRef.current;
      if (node && !node.contains(event.target)) {
        setOpen(false);
      }
    });
  }

然后，我想发生了这种情况，因为单击x图标时，标记和x图标包括与文本相同的东西，而单击时它们被卸载，而是显示输入。那么如何解决这个问题。 非常感谢

更新：这是working example，用于获取我要添加的选项，然后尝试使用x图标将其删除或直接单击“添加其他值”