Custom form control box shadow missing on focus when shadows are enabled

[jdanil]

When shadows are enabled in bootstrap, focus box shadows are missing for certain form control input states.

For example...

$enable-shadows: true;

// _variables.scss
$enable-shadows: false !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;

// mixins/_box-shadow.scss
@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

// _custom-forms.scss
.custom-checkbox {
  .custom-control-input:indeterminate ~ .custom-control-label {
    &::before {
      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
    }
  }
}

Testing in SassMeister, this evaluates to...

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  box-shadow: none;
}

Since .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before is more specific, it overrides the focus box shadow in .custom-control-input:focus ~ .custom-control-label::before.

This affects indeterminate checkboxes and active inputs. checked appears to be okay, as the focus styling is declared after it.

Can I suggest that the default values of the following variables be updated from none to null, so that they don't override the focus styling unless they are set explicitly?
$custom-control-indicator-checked-box-shadow
$custom-control-indicator-active-box-shadow
$custom-control-indicator-indeterminate-box-shadow
Also the focus styling for custom control input should be declared after active, and the specificity of the rule should be increased so that it applies to indeterminate checkboxes if the box shadows are modified by consumers.

Happy to contribute if you're OK with the proposed solution.

[mdo]

Can you verify this is an issue in our latest v5 work from master? We've combined our normal checks and custom checks into a single set of form controls.

[ffoodd]

This does not apply to v5, since only :focus gets a box-shadow.

As a matter of fact, I think this should be fixed by defining (and applying) a preferred pseudo-class order. :focus should come after :indeterminate, in that case.

Remember "LoVe HAte"?—which was later extended to "LoVe Fuck HAte" to include :focus?

For form controls, I'd go with:

• :required, :optional,
• :disabled, [readonly],
• :valid, :invalid,
• :indeterminate,
• :checked,
• :hover,
• :focus,
• :active.

It may even allow us to drop a few overrides here and there.

Without going this far, I think moving :focus after :indeterminate would be safe.

[ffoodd]

FWIW, @jdanil's suggestion is by far the best way to solve this :)

[XhmikosR]

Fixed by #30957.