fix(many): disabled control in item does not receive active/hover states (#26867)

Resolves #26706

core/src/components/checkbox/checkbox.tsx

@@ -150,23 +150,22 @@ export class Checkbox implements ComponentInterface {
   }
 
   @Watch('checked')
-  checkedChanged() {
-    this.emitStyle();
-  }
-
   @Watch('disabled')
-  disabledChanged() {
+  protected styleChanged() {
     this.emitStyle();
   }
 
-  // TODO(FW-3100): remove this
   private emitStyle() {
+    const style: StyleEventDetail = {
+      'interactive-disabled': this.disabled,
+    };
+
+    // TODO(FW-3100): remove this
     if (this.legacyFormController.hasLegacyControl()) {
-      this.ionStyle.emit({
-        'checkbox-checked': this.checked,
-        'interactive-disabled': this.disabled,
-      });
+      style['checkbox-checked'] = this.checked;
     }
+
+    this.ionStyle.emit(style);
   }
 
   private setFocus() {

core/src/components/checkbox/test/item/index.html

@@ -136,6 +136,18 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>States</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox disabled="true">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>

core/src/components/radio/radio.tsx

@@ -164,16 +164,23 @@ export class Radio implements ComponentInterface {
     }
   }
 
-  @Watch('color')
   @Watch('checked')
+  @Watch('color')
   @Watch('disabled')
-  emitStyle() {
+  protected styleChanged() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    const style: StyleEventDetail = {
+      'interactive-disabled': this.disabled,
+    };
+
     if (this.legacyFormController.hasLegacyControl()) {
-      this.ionStyle.emit({
-        'radio-checked': this.checked,
-        'interactive-disabled': this.disabled,
-      });
+      style['radio-checked'] = this.checked;
     }
+
+    this.ionStyle.emit(style);
   }
 
   private updateState = () => {

core/src/components/radio/test/item/index.html

@@ -154,6 +154,17 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>States</h1>
+        <div class="grid">
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio disabled="true">Enable Notifications</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
       </ion-content>
     </ion-app>
   </body>

core/src/components/select/select.tsx

@@ -214,14 +214,10 @@ export class Select implements ComponentInterface {
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   @Watch('disabled')
-  @Watch('placeholder')
   @Watch('isExpanded')
-  styleChanged() {
-    this.emitStyle();
-  }
-
+  @Watch('placeholder')
   @Watch('value')
-  valueChanged() {
+  protected styleChanged() {
     this.emitStyle();
   }
 
@@ -653,17 +649,21 @@ export class Select implements ComponentInterface {
   }
 
   private emitStyle() {
+    const { disabled } = this;
+    const style: StyleEventDetail = {
+      'interactive-disabled': disabled,
+    };
+
     if (this.legacyFormController.hasLegacyControl()) {
-      this.ionStyle.emit({
-        interactive: true,
-        'interactive-disabled': this.disabled,
-        select: true,
-        'select-disabled': this.disabled,
-        'has-placeholder': this.placeholder !== undefined,
-        'has-value': this.hasValue(),
-        'has-focus': this.isExpanded,
-      });
+      style['interactive'] = true;
+      style['select'] = true;
+      style['select-disabled'] = disabled;
+      style['has-placeholder'] = this.placeholder !== undefined;
+      style['has-value'] = this.hasValue();
+      style['has-focus'] = this.isExpanded;
     }
+
+    this.ionStyle.emit(style);
   }
 
   private onClick = (ev: UIEvent) => {

core/src/components/select/test/item/index.html

@@ -19,6 +19,7 @@
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
+
       h2 {
         font-size: 12px;
         font-weight: normal;
@@ -27,6 +28,7 @@
 
         margin-top: 10px;
       }
+
       @media screen and (max-width: 800px) {
         .grid {
           grid-template-columns: 1fr;
@@ -67,6 +69,17 @@
               </ion-item>
             </ion-list>
           </div>
+
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-list>
+              <ion-item>
+                <ion-select label="Fruit" value="apple" disabled="true">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         </div>
       </ion-content>
     </ion-app>