Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabled options in select field are not grey when field has focus #4526

dueddel opened this issue Jul 11, 2019 · 1 comment


None yet
2 participants
Copy link

commented Jul 11, 2019


Pretty minor bug, but I saw it and thought, this would be of interest and which might be fixed easily.

Disabled options in a selection field (when using _includes/forms/select) are not clickable (as expected), but they look the exact same as enabled options when the select field has been focussed before.

Steps to reproduce

  1. Extend craft\base\Field by adding a new field class.
  2. Implement getInpuHtml() method of the new field class as follows:
    public function getInputHtml($value, ElementInterface $element = null): string
        $view = Craft::$app->getView();
        $id = $view->formatInputId($this->handle);
        $namespacedId = $view->namespaceInputId($id);

        // Render the input template
        return $view->renderTemplate(
                'name' => 'test',
                'value' => $value,
                'field' => $this,
                'id' => $id,
                'namespacedId' => $namespacedId,
                'options' => [
                    ['optgroup' => 'Group 01'],
                    ['label' => 'Field A', 'value' => 'vala'],
                    ['label' => 'Field B', 'value' => 'valb'],
                    ['optgroup' => 'Group 02'],
                    ['label' => 'Field C', 'value' => 'valc'],
                    ['optgroup' => 'Group 03'],
                    ['label' => 'Field D', 'value' => 'vald'],
                    ['label' => 'Field E', 'value' => 'vale', 'disabled' => true],
                    ['label' => 'Field F', 'value' => 'valf'],
                    ['optgroup' => 'Group 04'],
                    ['label' => 'Field G', 'value' => 'valg', 'disabled' => true],
                    ['label' => 'Field H', 'value' => 'valh', 'disabled' => true],
  1. Register our new field type (as usually in the init() method of a module or plugin class hooking into the registerFieldTypes event).
  2. Add new field in Craft CP (Settings > Fields > New) and select our new field type.
  3. Also ensure to have that new field added to a entry type's field group.
  4. Now, go add a new entry and click on the selection field to show all options.
  5. Everything's fine, the disabled options are grey.
  6. Click anywhere else to close the dropdpwn. But only once to not lose the field focus.
  7. Click again the selection field to open all options.
  8. → Et voilá. The disabled options are not grey but black as the rest.

The disabled options are not selectable, though. So, functionally everything is okay. It's just a visual (CSS styling) thing.

Additional info

  • Tested in Firefox version: 67 and 68
  • Craft version: 3.1.33
  • PHP version: 7.2.17
  • Database driver & version: MariaDB 10.3.13
  • Plugins & versions: Should not infect the mentioned bug, but in my project I have currently installed and active: Redactor, SEO, Super Table, schema and a custom plugin.

This comment has been minimized.

Copy link

commented Jul 12, 2019

It turns out this was due to a CSS hack we were using to hide the ugly focus ring in Firefox:

A select input with an ugly focus ring in Firefox

But I suppose being able to see which options are disabled is more important :) Fixed for the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.