I'd like to be able to reset a DropdownWidget to it's initial state ('label') after an item has been selected and a button pressed.
Expected behavior
Running myDropdown.getMenu().setItem() (deselecting all items) would replace the initial label into the dropdown.
Actual behavior
The dropdown goes blank.
Steps to reproduce
Go to https://en.wikipedia.org and paste the following code into the console:
mw.loader.using(
'oojs-ui',
function(){
var dropdown1 = new OO.ui.DropdownWidget( {
label: 'Dropdown menu: Select a menu option',
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'a',
label: 'First'
} ),
new OO.ui.MenuOptionWidget( {
data: 'b',
label: 'Second'
} ),
new OO.ui.MenuOptionWidget( {
data: 'c',
label: 'Third'
} )
]
}
} );
var resetButton = new OO.ui.ButtonWidget({
label: "Reset dropdown"
});
resetButton.on('click', function(){
dropdown1.getMenu().selectItem();
});
var $container1 = $('<div>').css('position', 'relative')
.css('padding-bottom', '10em');
$container1.append(dropdown1.$element);
$container1.append(resetButton.$element);
$('body').append($container1);
});Select an item from the dropdown and then click the "Reset dropdown" button. Observe the blankness.