when open dropdown, other drop down does not close React JS

I have created a dropdown container of my own. the dropdown works well - when I click it it opens, if I click again it closes, and if I click outside of a dropdown container it also closes the drop down . yet, I have an issue - when I open a dropdown, it does not close the other drop downs I opened. if I click outside of the drop downs - all the drop downs are closes. I am not sure what to do.

this is my logic code:

  const [showState, setShowState] = useState<boolean>(false);

  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const $dropdown = dropdownRef.current;

    if (showState && $dropdown) {
      const handleClickOutside = (event: MouseEvent) => {
        if ($dropdown !== event.target && !$dropdown.contains(event.target as HTMLElement)) {
          setShowState(() => false);
          props.onToggle?.(false);
        }
      };

      document.addEventListener('click', handleClickOutside);

      return () => {
        document.removeEventListener('click', handleClickOutside);
      };
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showState, dropdownRef, setShowState, props.onToggle]);

  const handleTogglerClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation();

    setShowState((prev: boolean) => {
      const newValue = !prev;

      props.onToggle?.(newValue);

      return newValue;
    });
  };

  const onSelectOption = (action: IDropdownAction<Actions>, index: number) => {
    setShowState(() => false);
    props.onToggle?.(false);

    props.onSelect?.(action, index);
  };

html:

    <div className={`${classes['container']} ${showState ? classes['container--active'] : ''} ${props.className}`.trim()}>
      <div className={`${classes['toggler']} ${props.disabled ? classes['toggler--disabled'] : ''}`.trim()} onClick={handleTogglerClick}>
        {props.children}
        {props.showArrowIcon ? (
          <div className={classes['arrowContainer']}>
            <PIcon
              className={showState ? classes['arrowShow'] : classes['arrow']}
              name={showState ? 'dropDownArrowRight' : 'dropDownArrowDown'}
            ></PIcon>
          </div>
        ) : null}
      </div>
      <div className={`${classes['dropdownContainer']} ${classes[`dropdownContainer--${props.side}`]}`}>
        <MDropdown
          ref={props.dropdownRef}
          actions={props.actions}
          show={props.show}
          searchInput={props.searchInput}
          generalSearchPlaceholder={props.generalSearchPlaceholder}
          additionalElements={props.additionalElements}
          onSelect={props.onSelect}
        ></MDropdown>
      </div>
    </div>

css:

.container {
  position: relative;
  background-color: white;
  display: flex;

  &--active {
    background-color: map-get($colors, dropdown-active);
  }
}

.toggler {
  cursor: pointer;
  position: relative;
  width: 100%;

  &--disabled {
    pointer-events: none;
  }

  .arrowContainer {
    position: absolute;
    top: 0;
    inset-inline-end: 0.5vw;
    height: 100%;
    display: flex;
    align-items: center;

    .arrow {
      width: 0.77vw;
      height: 1.1vw;
    }

    .arrowShow {
      width: 1.1vw;
      height: 0.77vw;
    }
  }
}

.dropdownContainer {
  position: absolute;
  z-index: map-get($layers, above_layout);

  &--right {
    left: 100%;
    top: 5%;
  }

  &--left {
    right: 100%;
    top: 5%;
  }

  &--leftTop {
    right: 100%;
    bottom: 0%;
  }

  &--up {
    left: 100%;
    bottom: -10%;
  }
}

...................................

Via Active questions tagged javascript - Stack Overflow https://ift.tt/aX14KBE