Dropdown menu only closes when it loses focus if the parent dropdown has been clicked

[matthewtgilbride]

Steps

Test Case 1:

1. Hover over the dropdown (do NOT click on it!!!)
2. Select an item
3. Move the cursor somewhere outside the dropdown/items

Click off of the dropdown to close it between test cases.

Test Case 2:

1. CLICK on the dropdown.
2. Select an item.
3. Move the cursor somewhere outside the dropdown/items

Expected Result

Test Case 1

Dropdown should close.

Test Case 2:

Dropdown should close.

Actual Result

Test Case 1:

Dropdown stays open.

Test Case 2:

Dropdown closes.

Is this the expected behavior? I am writing a desktop app and normally the user hovers, then selects an item. With this order of events the dropdown remains open, requiring an extra click to close it, which doesn't seem correct....but maybe I've done something wrong?

Version

0.74.2

Testcase

https://codesandbox.io/s/10j450x2xl

[brianespinosa]

Hello @mtg5014. Your code sandbox is working as expected. Dropdown state is not fully managed when you are using the subcomponent API, which you are using in your example.

I made another codepen using the shorthand API in which the state is fully managed: https://codesandbox.io/s/y014qkmy3x

You'll notice a few tweaks I had to make with the icon prop so the dropdown arrow does not show, and then explicitly passing an icon component into the trigger prop since the selection will replace the text prop. If you do not like this, you could still use the subcomponent API like you did in your first example, but you would need to manage the state yourself.

[matthewtgilbride]

Hi @brianespinosa , and thanks for the quick response.

I am trying to render each DropdownItem with as={Link}, where Link is from react-router-dom (4.2.2).

I tried using options as follows:
const mainMenuOptions = [
{
key: 1, icon: 'home', text: 'Home', as: Link, to: '/',
},
{
key: 2, icon: 'users', text: 'Users', as: Link, to: '/users',
},
{
key: 3, icon: 'list layout', text: 'Stuff', as: Link, to: '/stuff',
},
];

While I didn't suspect that would work, it did resolve this particular issue. However, it leads to strange behavior with regards to the selected item. I suspect you don't need to see a codepen of that, but let me know if so.

I don't see an obvious function I can call to open/close the dropdown/items if I use the subcomponent API. Do you have a recommendation?

[brianespinosa]

@mtg5014 Just for clarity sake, your follow-up where you reference passing as: Link is using the shorthand API. The subcomponent API is where you are defining each component separately.

I don't see an obvious function I can call to open/close the dropdown/items if I use the subcomponent API. Do you have a recommendation?

To answer this, if you are using the subcomponent API, the active prop is what opens a Dropdown component. The active prop is also what marks a Menu.Item as active. You can do the same thing with the shorthand API in your example by setting active: true in your mainMenuOptions array of objects.

Another thing you might want to consider if you want to set an active class... you are using Link in react-router. There is also a NavLink component that sets an active class for you based on the current route. That class name is compatible with SUI styles and would also work.

[matthewtgilbride]

Thanks again @brianespinosa. I ended up managing the active prop using the subcomponent API, and that worked fine. I just needed to set active={false} onMouseLeave of the items. I did not know that NavLink would play nicely with SUI styles, however. I switched over and now that works as well!

[kadusjc]

I ve solved that keeping dropdown opened. In my case, I m calling this method into every method of flatpckr

flatpickr('#startDate', {
dateFormat: "m/d/Y", disableMobile: "true",
onChange: _keepSimpleDateDropDownOpened,
onOpen: _keepSimpleDateDropDownOpened,
onMonthChange: _keepSimpleDateDropDownOpened,
onYearChange: _keepSimpleDateDropDownOpened,
onValueUpdate: _keepSimpleDateDropDownOpened
})

function _keepSimpleDateDropDownOpened() {
    if ($('#simpleDateDropdown').dropdown()[0].hidden) { 
        $('#simpleDateDropdown').dropdown('show');
    }
}