PopupSelect component closes the parent DropdownMenu

Hi Community,
I have a PopupSelect component nested inside a DropdownMenu component when I choose option from the PopupSelect it closes the parent dropdown.

<DropdownMenu<HTMLButtonElement>
            trigger={({ triggerRef, ...props }) => (
              <Button
                iconBefore={<MediaServicesFilterIcon label='filter' />}
                {...props}
                ref={triggerRef}
              >
              </Button>
            )}
          >
            <DropdownItemGroup>
                            <PopupSelect
                              placeholder="Search"
                              options={userOptions}
                              defaultOptions
                              closeMenuOnSelect={false}
                              popperProps={{ placement: 'right-start' }}
                              cacheOptions
                              target={({ isOpen, ...triggerProps }) => (
                                <IconButton icon={MoreIcon} label="more" {...triggerProps} shape='circle' 
                                     />
                              )}
                            />
            </DropdownItemGroup>
          </DropdownMenu>
  

Does anyone know how to fix this ?

1 Like

Hi @OmarReda, I’m currently facing a similar issue where my case is that I have a Popup component nested inside a DropdownMenu and the Popup component closes the parent dropdown whenever I click anywhere inside the Popup component. Have you figured out a way of resolving this issue yet? Appreciated any input.