The color_field module adds a Spectrum widget for color inputs with JavaScript. However, the CSS rule:

.js-color-field-widget-spectrum__color.required {
display: block !important;
}

forces the hidden color input to remain visible when the field is required, even though the widget itself should be the visible control. This makes it hard to hide required color inputs via JS without fighting the CSS.

The expected behavior is that when the Spectrum picker is used (and the text input should be hidden), required fields should not be forced to display: block !important. This CSS rule interferes with intended hiding logic and breaks UX.

Steps to reproduce:

Add a required color field using the Color Field module with the Spectrum widget.

Configure Spectrum to hide the text input (e.g., show palette only or hide manual input).

Observe that the .js-color-field-widget-spectrum__color input remains visible because of the .required CSS rule.

Actual behavior:
Required text input is visible/unhidden due to CSS rule; incorrect.

Expected behavior:
The required class should not force the input to become visible — hiding logic should prevail or CSS should be updated.

Issue fork color_field-3575666

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

meryem dibe created an issue. See original summary.

velmir_taky made their first commit to this issue’s fork.

velmir_taky opened merge request !40

velmir_taky’s picture

velmir_taky commented
Status: Active » Needs review

Problem

display: block !important overrides JS hiding logic for required fields in the Spectrum widget — the raw text input stays visible when it shouldn't.

Fix

Replaced with the visually-hidden pattern (same approach as Drupal core's .visually-hidden). The input stays in the DOM for required validation but is no longer visible.