Dropdown from JS: Submenu items with selected: true not visually marked as selected on initial render #3299
Description
Description
When initializing a dropdown with submenu items that have selected: true, the selected items are not visually marked with the .selected class in the DOM on initial render. This issue affects both direct submenu items and nested submenu items. The dropdown correctly sets the value internally, but the visual feedback is missing until user interaction occurs.
Steps to reproduce
- Create a dropdown with submenus
- Set
selected: trueon a submenu item - Initialize the dropdown
- Observe the DOM
Expected Behavior
The submenu item with selected: true should be visually marked as selected when first opening the submenu
The item's "selected" visual state should match how it appears after manually selecting it
Actual Behavior
The submenu item with selected: true is not visually marked as selected on initial render
Only after manually selecting the item and reopening the dropdown does the visual selected state appear
The value is correctly selected in the dropdown's internal state, but the visual UI does not reflect this
Additional Notes
This only affects submenu items - top-level items with selected: true work correctly
The issue appears to be purely visual - the correct value is selected and the dropdown functions properly otherwise
Reproducible in Fomantic UI 2.9.4 (latest version)
Minimal reproduction case
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
<div class="ui dropdown">
<div class="text"></div>
<i class="dropdown icon"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<script>
$(".ui.dropdown").dropdown({
values: [
{
name: "Human",
value: "human",
type: "menu",
values: [
{
name: "Baby",
value: "baby",
selected: true // This should be visually marked as selected
},
{
name: "Kid",
value: "kid"
}
]
}
]
});
</script>
</body>
</html>