Page MenuHomePhabricator

OOjs-ui TextInputWidget broken if a label is supplied with labelPosition=before
Closed, ResolvedPublic

Description

OOjs-ui TextInputWidgets are currently broken if they have a label and have before for the label position. The widget cannot be selected, and the value is not displayed. (The getValue and setValue methods still work, however.) Also, the label is flush to the left of the input box, whereas previously it had some padding.

oojs-ui textInputWidget label bug.png (55×724 px, 817 B)

I'm not seeing any warnings or errors in the console, and while I am not familiar with all the ins and outs of OOjs-ui, the DOM structure looks normal to me. This is a regression, as this configuration was working for me previously in my Draftify gadget. Tested in Firefox on Linux and Edge on Windows 10.

This can be reproduced with the following code:

mw.loader.using( 'oojs-ui', function () {
	var textInputWithLabelBefore = new OO.ui.TextInputWidget( {
		label: 'A label',
		labelPosition: 'before',
		value: 'A value'
	} );
	
	$( '#bodyContent' ).append( textInputWithLabelBefore.$element );
} );

I've also made an example script on testwiki.

Event Timeline

MrStradivarius renamed this task from OOjs-ui textInputWidget broken if a label is supplied with labelPosition=before to OOjs-ui TextInputWidget broken if a label is supplied with labelPosition=before.Dec 22 2016, 1:33 AM
MrStradivarius updated the task description. (Show Details)

So this become part of OOjs UI with T87239: Create a text input widget that can have a label within the input area.
@Esanders I'm not sure what the UX thoughts behind the -before position were, how should that input work with the label there?

Change 332988 had a related patch set uploaded (by Bartosz Dziewoński):
Revert "TextInputWidget/MediaWiki theme: Improve Less code and align labels"

https://gerrit.wikimedia.org/r/332988

Change 332988 merged by jenkins-bot:
Revert "TextInputWidget/MediaWiki theme: Improve Less code and align labels"

https://gerrit.wikimedia.org/r/332988

The question remains from a user experience perspective: Why do we even offer this option? How does the label positioned in a text input where the text should be put in help the users get their stuff done? What are the use cases where this makes sense?