Page MenuHomePhabricator

MultilineTextInputWidget creates 2 textareas (one visible, another hidden)
Closed, ResolvedPublic

Description

When creating a OO.ui.MultilineTextInputWidget widget with JavaScript, the widget creates 2 textareas with the same properties, one of them visible (the first one) and the second one hidden.

Both have the same ID and name, which causes that, when it's used as a form field, the value of this widget is lost, because the browser apparently sends the second textarea (hidden and obviously not modified by the user).

This happens at least on MediaWiki 1.30, and it's happening on current MediaWiki master. The following code can be executed on a WMF wiki to see the effect:

mw.loader.using(['oojs-ui'], function() {
	var ooML = new OO.ui.MultilineTextInputWidget( {
		id: 'bugMultiLineWidget',
		name: 'bugMultiLine',
		inputId: 'bugMultiLine',
		autosize: true,
		rows: 1,
		maxRows: 6
	} );
	$( ooML.$element ).prependTo( $('#bodyContent') );
});

This code will add a textarea at the top of the content. Inspect it with the developer tools of your browser, and you'll see both textareas:

This doesn't happen when I use a TextInputWidget instead.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2018, 7:56 PM

Looks like the second textarea may be intentional for the "autosize" property, because if I remove it later, the textarea does not autosize.

I've removed the id and name properties of the second textarea and it solves the problem of submitting the wrong one to the server, while everything else seems to function:

ooML.$element.find( 'textarea' ).eq( 1 ).removeAttr( 'id name' );

Change 447749 had a related patch set uploaded (by Prtksxna; owner: Prtksxna):
[oojs/ui@master] MultilineTextInputWidget: Remove 'name' and 'id' from $clone

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

Thanks for raising the issue @Ciencia_Al_Poder! Yeah we need the clone to be able to calculate the new height, but there is no reason for us to use the same id and name.

Change 447749 merged by jenkins-bot:
[oojs/ui@master] MultilineTextInputWidget: Remove 'name' and 'id' from $clone

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

Prtksxna closed this task as Resolved.Jul 26 2018, 1:35 AM
Prtksxna claimed this task.
Volker_E triaged this task as Normal priority.Jul 26 2018, 8:34 AM
Volker_E moved this task from Backlog to OOUI-0.27.6 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.27.6); removed OOUI.
Volker_E removed a project: Patch-For-Review.