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

[dueddel]

Description

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(
            '_includes/forms/select',
            [
                '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],
                ],
            ]
        );

3. Register our new field type (as usually in the init() method of a module or plugin class hooking into the registerFieldTypes event).
4. Add new field in Craft CP (Settings > Fields > New) and select our new field type.
5. Also ensure to have that new field added to a entry type's field group.
6. Now, go add a new entry and click on the selection field to show all options.
7. Everything's fine, the disabled options are grey.
8. Click anywhere else to close the dropdpwn. But only once to not lose the field focus.
9. Click again the selection field to open all options.
10. → 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.

[brandonkelly]

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

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