Contact form block dropdown arrow wrapping under field in Assembler theme

[marissaexplores]

Quick summary

The dropdown arrow is under the dropdown field. It should be inline on the right side of the field.

Steps to reproduce

1. Install and activate Assembler theme
2. Add a contact form to any page.
3. Add a dropdown field to the form
4. View the arrow under the form.

A clear and concise description of what you expected to happen.

The arrow should be displayed on the right side of the field, inline with the text.

What actually happened

The arrow is displayed under the dropdown field.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Using this CSS as a workaround:

.contact-form .contact-form__select-wrapper::after {
  right: 15px;
  top: 50%;
}

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

I have tested the dropdown field on other themes like Twenty Twenty-Four, Annalee, and Outland. The issue does not occur on those themes. So it seems to only be an issue when using the Assembler theme.

[richtabor]

I have tested the dropdown field on other themes like Twenty Twenty-Four, Annalee, and Outland. The issue does not occur on those themes. So it seems to only be an issue when using the Assembler theme.

Ideally there's a solution that resolves this as other themes does.

[pauloeaquino]

8694098-zd

Recent build where the customer specifically requested for a dropdown field in their form. I used the CSS workaround for now.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8694098-zen

[richtabor]

@MaggieCabrera are you still planning on working on this?

[MaggieCabrera]

@MaggieCabrera are you still planning on working on this?

Sorry, I think you assigned me to this and it got lost into a sea of notifications, I'm looking at it

[MaggieCabrera]

I'm investigating this. So far I know that the culprit is this line:

themes/assembler/style.css

Line 75 in fb9d983

padding: 0.8rem 1rem;

It looks like grunion (I thought that was deprecated, but some of the code lives in jetpack apparently) is doing some weird class swapping around, and if we modify the padding of the input element it preaks the arrow for the select. It's really hard to debug because the plugin is doing something with class swapping and rewriting the CSS, so it's not as simple as overriding the class. It was a matter of trial and error to actually verify that the selector apparently causing this problem is in fact input:not([type="submit"]):not([type="radio"]) when the element we are targeting is a select!!!

My suggestion is to remove the padding altogether or to target only the specific types that we want to modify and not try and target the general input element for this.

[MaggieCabrera]

Automattic/jetpack#40206 should fix this, #8418 is a last resort in case that didn't get merged