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?