CDropdown doesn't autoClose if menu items are buttons

[yurii-novikov-jetbeep]

I have updated to newest @coreui/react@5.9.1 and found a bug that was not reproduced in version 5.5.0

In our project we use CDropdowns a lot, sometimes items are links and sometimes they are buttons, like in your example: https://coreui.io/react/docs/components/dropdown/#menu-items (looks like the link doesn't work, so please see the screenshot 1)

I expect that when I click on the button - the dropdown will be closed, but it doesn't. I found the check in the code (screen 2) that prevents closing. I understand that it covers the case when forms are inside, but my scenario becomes broken.

I need a way to close the dropdown on button click, so what are my options?

[mrholek]

I will fix it in the next release.

[yurii-novikov-jetbeep]

The best way for me is to have a boolean flag in <CDropdown />, whether to do a match with the clicked target or not. Or something like this.

By the way, I found that instead of:

<CDropdownItem as="button" onClick={...} />

it's possible to use just:

<CDropdownItem role="button" onClick={...} />

It does the same and covers my case with buttons.

But I still need a flag, because also I use checkboxes in that menu (see the screenshot), and I need it to be closed when checkbox is toggled

[mrholek]

You have full control over when to close the menu. Please review this example.

const [visible, setVisible] = useState(false);
  return (
    <CDropdown
      autoClose="outside"
      visible={visible}
      onHide={() => setVisible(false)}
      onShow={() => setVisible(true)}
    >
      <CDropdownToggle color="secondary">Clickable outside</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem as="button" onClick={() => setVisible(false)}>
          Action
        </CDropdownItem>
        <CDropdownItem as="button">Another action</CDropdownItem>
        <CDropdownItem as="button" onClick={() => setVisible(false)}>
          Something else here
        </CDropdownItem>
        <CFormCheck id="flexCheckDefault" label="Default checkbox" />
        <CFormCheck
          id="flexCheckDefault2"
          label="Default checkbox"
          onClick={() => setVisible(false)}
        />
      </CDropdownMenu>
    </CDropdown>
  );