DropDown: dropdown drops down instantly if it's first field in form

[DarkSide666]

If DropDown field is first field in form, then it drops down automatically because it gets focus on form load. This is annoying.

Possible solution:

• maybe dropdown field should not have tabindex ?
• or somehow do blur if dropdown field is first field in form.

[romaninsh]

@DarkSide666 this is correct behaviour. Solution - don't put drop-down field first on the form.

[DarkSide666]

@romaninsh I don't see how this is correct behaviour. It's very bad for UX.

See https://www.useloom.com/share/309c3e1e9f0b44d5a12efe8bf19c0cd8

If DropDown is first field in form:

1. If value is required and there is no default value set, then it's ok to expand it on form load.
2. In other cases - field value is not required or it is required, but (default) value is already set, it's very strange to expand it on form load.

In video you can see situation when value is required and default value is already set. There is no use to expand that field automatically.

[romaninsh]

UX also means having the fields in a correct order. Don't put drop-down as your first field.

If we introduce new state for a drop-down which is 'focused but not opened' then it's a lot of "hacks" and "workarounds". I am not against that, but it's a lot of work, may not be a best solution, may introduce other problems and can be solved in a much simpler way for your case.

[romaninsh]

you can also use radio buttons..

[romaninsh]

My proposed solution: add property for the form to NOT FOCUS first field by default.

[ibelar]

@DarkSide666 - have you tried using semantic-ui dropdown options:

• 'allowTab' - Whether to allow the element to be navigable by keyboard, by automatically creating a tabindex;
• 'showOnFocus' - Whether to show dropdown menu automatically on element focus;

Both option are true by defaults.

You can setup option using FormField\Dropdown::setDropdownOption($option, $value) method.

[DarkSide666]

@ibelar

• allowTab=false - removes tabindex=0 attribute, but still field gets focus as first field in form
• showOnFocus=false - does the trick, dropdown don't expand when it gets focus. Drawback - when you click on that input field it doesn't expand anymore and you have to start typing or have to click down arrow icon on the right.

@romaninsh I like your proposal. Actually solution could be quite simple. Something like this:

before rendering fields:
if ($form->doNotFocusFirstFieldByDefault) {
    $form->template->addSomeHiddenInputElementAsFirstElementInFormWithTabindex0();
}

Also can set tabindex=-1 to all fields, but that's bad for accessibility. And maybe better solution is this: use autofocus="autofocus"

Anyway see https://stackoverflow.com/a/20735034/1466341

[mvorisek]

fixed in Fomantic-UI 2.9.0 https://github.com/fomantic/Fomantic-UI-Docs/blob/c019739a5c5b9472c7725d794a68b85a6c46fca9/server/documents/introduction/new.html.eco#L218