Page MenuHomePhabricator

Consider adding a dropdown arrow for OOjs UI's MenuTagMultiselectWidget
Closed, ResolvedPublic

Description

When working on the Advanced-Search extension, we realized that a MenuTagMultiselectWidget is missing a UI element indicating a user that it is a drop-down menu.
As a user, I would expect something similar to the arrow in a "normal" drop-down menu

Dropdown (arrow as indicator):

MenuTagMultiselectWidget (no indicator):

MenuTagMultiselectWidget (expanded, no indicator):

Event Timeline

Restricted Application added a project: archived--TCB-Team. · View Herald TranscriptOct 11 2017, 12:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Tobi_WMDE_SW renamed this task from drop down arrow in the name space field to Consider adding a drop down arrow for the OOjs-UI MenuTagMultiselectWidget.Oct 27 2017, 10:02 AM
Tobi_WMDE_SW removed Tobi_WMDE_SW as the assignee of this task.
Tobi_WMDE_SW updated the task description. (Show Details)
Tobi_WMDE_SW added subscribers: Tobi_WMDE_SW, Lea_WMDE.
Volker_E added a subscriber: Volker_E.EditedOct 27 2017, 10:43 PM

Thanks for bringing this up @Pablo-WMDE and @Tobi_WMDE_SW
It is actually true, that we are not consistent on the treatment of menu indicators. The closest similar widget currently is the ComboBoxInputWidget.

We might need to add a class for MenuTagMultiselectWidget with allowArbitrary:false setting. cc: @Mooeypoo

Realizing another little nitpick in the course, the ComboBoxInputWidget's dropdown button isn't altering outside :hover when menu is active. Filed T179213 for it.

Volker_E renamed this task from Consider adding a drop down arrow for the OOjs-UI MenuTagMultiselectWidget to Consider adding a dropdown arrow for OOjs UI's MenuTagMultiselectWidget.Oct 28 2017, 3:00 AM
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Backlog to Next-up on the OOUI board.

@Volker_E any updates on this?

Volker_E added a comment.EditedDec 13 2017, 11:43 PM

@Tobi_WMDE_SW So the issue for holding back on a solution for an seemingly simple problem is, that we've got a slightly different using pattern in all other elements with dropdown arrows:
DropdownWidget, where the full area triggers the dropdown:


ComboboxInputWidget, where only the buttonized area triggers the connected dropdown, elsewhere it focusses the input without triggering the dropdown appearance. Only by typing into, it appears (similar to an autocomplete)

Only when preset options are given, the menu is available. The using pattern would then be an in-between state of ComboboxInput- and DropdownWidget.
Options:
1. Adding a button at the end

  • Pros:
    • Strong signal that this element triggers a dropdown
  • Cons:
    • User doesn't need to click the button to trigger the dropdown which would be a bit confusing and also it weakens ComboboxInputWidget and results in inconsistency

2. Adding a down arrow indicator at the end

  • Pros:
    • Signal that dropdown is available
  • Cons:
    • This would be a new kind of widget appearance, as it might be confused with a dropdown before it being focussed. Users might think that they cannot type into it.

3. Leave as is

  • Pros:
    • None of the cons above
  • Cons:
    • Not signalising the user that there are preset options, but given that in their task they want to add tags anyways, they are probable to interact with the MenuTagselectWidget and therefore will on click or by tabbing-in become the options presented.

Option 2 visualized:

By the way, you can trigger option 2 already for your specific MenuTagMultiselectWidget through this:

// See documentation at: 
// https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuTagMultiselectWidget
new OO.ui.MenuTagMultiselectWidget( {
	allowArbitrary: true,
	indicator: 'down',
	selected: [
		{
			data: 'foo',
			label: 'Label for foo'
		},
		{
			data: 'bar',
			label: 'Label for bar'
		}
	],
	options: [
		{
			data: 'foo',
			label: 'Label for foo'
		},
		{
			data: 'bar',
			label: 'Label for bar'
		},
		{
			data: 'baz',
			label: 'Label for baz'
		}
	]
} )

I'm not fully convinced that it is helpful as general approach yet.

Change 398251 had a related patch set uploaded (by Tobias Gritschacher; owner: Tobias Gritschacher):
[mediawiki/extensions/AdvancedSearch@master] Add dropdown indicator to namespace selection field

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

@Volker_E thank you for the hint!
I've now added the down arrow indicator (though need to fix some style issues associated with this) and additionally added a placeholder text. I think this combination gives the user enough hints to see that the element can be used as dropdown but also that the user can type in it.

In T182044#3833701 @Charlie_WMDE made a visualization of this:

Change 398251 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Add dropdown indicator to namespace selection field

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

Volker_E closed this task as Resolved.Jan 8 2018, 9:49 PM
Volker_E assigned this task to Tobi_WMDE_SW.
Volker_E removed a project: Patch-For-Review.

This seems resolved to me. Feel free to re-open if there's something missing.