Skip to content

bug: no styling on disabled ion-select-option #18542

@kelvindart

Description

@kelvindart

Ionic version:
[x] 4.x

Current behavior:
If you add either a disabled attribute, or disabled="true" attribute to an ion-select-option, there is no styling to reflect this. The item cannot be selected, so the behaviour is correct. But there is no visible way to determine a disabled option.

N.b. this is not a problem when the ion-select's interface is set to popover (i.e. <ion-select interface="popover">...</ion-select>

Expected behavior:
For the ion-select-option to be greyed out or have some sort of visible sign if it is disabled.

Steps to reproduce:

  1. Add the code snipped from "Related code" below to a new page.
  2. Observe how a disabled ion-select-option looks the same as a non-disabled item.

Related code:

<ion-item>
  <ion-label>Statuses</ion-label>
  <ion-select id="status">
    <ion-select-option value="selected" selected>Selected</ion-select-option>
    <ion-select-option value="default">Default</ion-select-option>
    <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
  </ion-select>
</ion-item>

Other information:
PR: #18545

Image of the issue:

ion-select-option disabled

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/kelvindart/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.15.3 (/Users/kelvindart/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.9.0
   OS     : macOS High Sierra

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions