Ionic-framework: [Ionic 4.5.0] bug: floating ion-label ignores color with ion-input

[Waghubinger-Gruppe]

Bug Report

Ionic version:


[x] 4.5.0

Current behavior:

When a floating ion-label is used together with ion-input and the color property is set, the color changes to primary when input element gets focused.

Expected behavior:

Color of label has the same color during input as without input

Steps to reproduce:

Combine an ion-input with a floating label and give the label a color property. Set focus on the input element -> color of label changes back to primary

Related code:

  <ion-item>
    <ion-label position="floating" color="danger">This is a label</ion-label>
    <ion-input type="text" [required]="true" [(ngModel)]="input"></ion-input>
  </ion-item>

Gif showing the issue:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\UVKApps\AppData\Roaming\npm\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.14.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.5.0
   OS     : Windows 10

[topalavlad]

This only happens on android because of this variable from label.md.vars.scss:
$label-md-text-color-focused: ion-color(primary, base) !default;
vs ios:
label-ios-text-color-focused: null !default;

If no one thinks this was on purpose I can make a PR so that the label keeps the same color when focused as when not focused.

[mukherjee96]

I know the devs are working pretty hard and this maybe is not that important an issue. But is there a workaround to this problem that we can use? Thanks!

[brandyscarney]

This is not a solution but it is a workaround: https://codepen.io/brandyscarney/pen/OJJZKME

Setting the following code will get you to keep the label color on focus:

.item-has-focus ion-label.ion-color {  
  color: var(--ion-color-base) !important;
}

and if you want to override the highlight color too:

:root {
  --ion-color-danger: #f04141;  
}

.label-color-danger {
  --highlight-color-focused: var(--ion-color-danger) !important;
}

Note that the --ion-color-danger variable must be defined in your app. In our Angular starters this is done already.

The PR created by @topalavlad looks great for resolving the label issue, but if we want the highlight color to be updated too it will be more tricky.

[hemantkapoor09]

If trying to Get Color on Label when its floating or any other interactive-position.
Try:

ion-item.item-has-focus > ion-label{
  color:  [yourColor]  !important;
}

100% Working

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.