Page MenuHomePhabricator

OOUI: ComboBox labels overlap dropdown buttons
Open, Needs TriagePublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

Construct a ComboBox with a label and at least one option:

	mw.loader.using( [ 'oojs-ui-widgets' ], function () {

		// Example: A ComboBoxInputWidget with additional option labels.
		var comboBox = new OO.ui.ComboBoxInputWidget( {
			value: 'Option 1',
			options: [
				{
					data: 'Option 1',
					label: 'Option One'
				}
			]
		} );

		comboBox.setLabel( 'Some Label' );

		$( '#bodyContent' )
			.prepend( comboBox.$element );
	} );

What happens?:

The label overlaps the dropdown button:

2021-11-30_132921_709x39_screenshot.png (39×709 px, 3 KB)

What should have happened instead?:

Should appear "inboard" of the dropdown button.