[Dropdown] Marking dropdown menu item as active prevents it from being expanded

[Neaox]

If you have a menu that contains a dropdown menu item and you mark that item as active (to indicate that it is the current area/page) then you are unable to expand/click on that item.

See this fiddle for an example: https://jsfiddle.net/52m76fzc/1/

Clicking on the active item does nothing clicking on the item next to it expands the dropdown item.

The expected behaviour is that you should be able to mark an item as the active/current item while still being able to expand it.

[v3rron]

same problem here... when it's selected as active, the menu just opens and closes instantly in a moment

[paglias]

Any alternative until this gets fixed?

[jclee100]

It's a conflict between menu item's active and dropdown's active. Perhaps dropdown's active should be renamed open.

[zaurbek]

@komirad I agree with you. active should be renamed to open

[Billybobbonnet]

Is there an existing class name to mark a menu dropdown item as active (as opposed to open), or should I write my own to achieve that?

[Billybobbonnet]

Actually, I just made a quick and dirty set of rules for the current class keyword in order to highlight active menu dropdowns. Tested for inverted menus with both secondary variation and none.

.menu:not(.secondary) .dropdown.item.current{
  background: rgba(255,255,255,.15);
  color: #fff !important;
}
.menu:not(.secondary) .dropdown.item.current:after{
visibility: visible!important;
z-index: 100!important;
background: #3d3e3f !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
}
.menu.inverted .dropdown.item.current{
border-color: #fff;
}

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[mehranabi]

No - Do not close it !!! I have same problem!

[salaros]

+1

[WilliamT-Streamba]

+1

[nosson]

I am having the same issue.

[atgrau]

Same problem here, any solution?

[BlackTomm]

just write in below format can work properly without affecting dropdown

<div class="item active">
       <div class="ui dropdown link">your code</div>
</div>