Forms: dropdown field visually different in editor & frontend

[simison]

Dropdown field in Forms shows "native" browser dropdown in the frontend, but in the editor we have custom dropdown:

Whichever way we go, we should stay consistent, and this should likely be user option.

[Robertght]

I'm marking this as triaged on the One Board, but let PAs know if there's a need for any input from us.

[ntsekouras]

How would you suggest doing that? Front end using a native select is kind of a recent change and it makes sense to keep, but how could you edit that in the editor?

Another option would be to have a preview toolbar button maybe? 🤔

[edanzer]

Yep, I think this is intended behavior. The frontend, where the dropdown is expected to work like a dropdown, uses the browser rendering for select drop downs. The backend, where you need to add/edit the options in an interactive way, uses a specific implementation to allow that.

I'm not sure if this entirely needs fixing, but if so, a preview button like @ntsekouras suggests seems like a good idea and is consistent with how the HTML block (which also look different between editor/frontend). Maybe you could also renders frontend-style when the block is not active, and then change to the interactive editable version when the block is active?

[enejb]

I took a look at this and I think what we currently have make sense. The current UI in the editor is designed so that it is easier to edit. While the current UI on the front end it is designed to be easier to fill out (more accessible ) etc.

Look almost the same when you don't have the field selected.

See
Editor

Frontend

@simison Can you provide a way to processed here.
If we do go with the select option would you exact the field to be editable in the sidebar?

Or do you see us implementing the same drop down on the front-end. That uses to be the case but we went the other way around probably to increase accessibility. cc @monsieur-z for more insights on this.

[simison]

Let's leave this as-is now and revisit if we get feedback.

I want us to keep the native select as default experience anyway, and the job would be to add "customizable" dropdowns but that's entirely different task.

This might still come relevant with "write & edit" modes where we might need to decide what to show in the editor for each mode.