[Ionic 4.5.0] ion-button lost background focused & activated Custom Properties colors

[berchik]

Bug Report

Ionic version:

[x] 4.5.0

Ionic/angular - focused and activated button states now always show --ion-color-primary regardless of the button css properties.

Adding fill="clear" adds transparency but still not using the --background-focused of the css (this trick used to work in the past)

Ionic info:

Ionic CLI : 5.0.1 (C:\Users\jo\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

Utility:

cordova-res : 0.3.0 native-run : 0.2.4

System:

NodeJS : v10.15.3 (F:\Program Files\nodejs\node.exe) npm : 6.4.1 OS : Windows 10

[brandyscarney]

Thanks for the issue! Could you please provide code to reproduce this? I'm not able to see this: https://codepen.io/brandyscarney/pen/YoyWEo?editors=1100

[berchik]

Thanks @brandyscarney. --background-focused works when button class is ion-focused, although I’ve never used it and don’t see anything in the docs regarding this class. Is this a general class for all components?

BTW, the the default Hover color (when PWA run on desktop) changed from Ionic 4+ to 4.5

[brandyscarney]

@berchik Could you tell me how you are focusing the button? The ion-focused class is added by tabbing to the button with the keyboard. I just applied the class as a way to show the --background-focused being used. Here's a gif of me tabbing to it using the keyboard:

The hover color has been updated to match the MD spec. They should be a shade lighter on hover for solid buttons, and an opaque version of the text color on outline/clear buttons. Here's a good demo for them (scroll down a bit): https://material-components.github.io/material-components-web-catalog/#/component/button. If you're seeing something other than this, however, let me know please!

[berchik]

As I understand it, clicking the mouse or taping a button should set the active color, and when released remain in a focused state until the focus is activated by another component. Therefore, the default behavior for many cases can use the focused and background as the same color, but still have the option to set the focused color differently in cases when we want to show the last button clicked/focused.

[brandyscarney]

@berchik Yeah, I can see that is how Material Design does it. If we follow their implementation it seems like this is a bug with how our ion-focused class is being added. It does also state in the MDN docs focus should be given on click: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Focus_and_Selection#Focused_Elements

cc @manucorporat @liamdebeasi

[santiagolarsen]

Hello! Has this been resolved in Ionic 5? I seem to have the same problem.

[btsiders]

@berchik Could you tell me how you are focusing the button? The ion-focused class is added by tabbing to the button with the keyboard. I just applied the class as a way to show the --background-focused being used. Here's a gif of me tabbing to it using the keyboard:

I'm tabbing though my page with the keyboard and none of my buttons are getting the ion-focused class. I've seen it work properly on the ionicframework.com site in the example, but in my app, it isn't happening. I kind of think it is because my app has been upgraded from Ionic 2 to 4 to 5 over the years and I missed an upgrade step somewhere...

If I add (ionFocus) and (ionBlur) event handlers to my ion-button and add/remove the ion-focused class in there, it works.

[ConnorBrennan]

@berchik Could you tell me how you are focusing the button? The ion-focused class is added by tabbing to the button with the keyboard. I just applied the class as a way to show the --background-focused being used. Here's a gif of me tabbing to it using the keyboard:

I'm tabbing though my page with the keyboard and none of my buttons are getting the ion-focused class. I've seen it work properly on the ionicframework.com site in the example, but in my app, it isn't happening.

I'm also having this same issue. The elements get the has-focus class, but that is also applied when it is selected with a click, so it's not what I need. Additionally, that class is not applied to all elements with ion-focusable either, so it cannot even be used as a consistent stopgap measure.

I am on Ionic Angular 7.5.4