Focus element state ignored when hovered over?

Ignition
1

So I'm seeing this weird behavior where I have a button with two styles classes applied, one gives button formatting including text color when hovered over. The other is a generic focus style class that is applied to interactive components that applies a box shadow when the component is in focus.

The strange thing is that if the button is in focus and I hover over it, my focus style isn't applied, but the default focus style (the blue ring) is.

image

How come the element state 'focus' is appearing differently to the default focus formatting.

2

Hello Samuel_Weston,

I tried replicating your problem with the given information. I was not able to reproduce the issue you are seeing and would like to help you further.

Would it be possible to send over your configured style classes?
I want to know how you are setting focus on your checkbox component. Is the focus being set when you are hovering over the component?

1 Like
3

I have two style classes applied to the button, the first is the button class that sets the icon color dark by default and light when the element state = hover. The other style class is the focus ring, it applies a box-shadow to the button when the element state = focus.

I don't want the focus ring applied whenever we hover over the component, just when the element is in focus. Do the styles only apply one element state at a time? I could see this being an issue since a state like, checked and hover for instance could often occur at the same time.
CTech_Resource_2023-01-12_1325.zip (2.1 KB)

4

Hello Samuel_Weston,

Taking a look at your style classes in my environment, I was not able to replicate the checkbox styles after applying the provided style classes. Would it be possible to provide me with a full project export where the behavior is happening? Also, what is the Ignition version you are working with?

I suggest opening up a support ticket so we can help you get your style classes sorted for the checkbox. You can contact our support division by clicking on the link below.
https://support.inductiveautomation.com/hc/en-us

5

Thanks Patrick, unfortunately I can't export the full project due to company policy, I'll consider opening a support ticket.

6

Just realised that it's probably not styling correctly because it's pulling the colors from my custom theme, I'll submit a new upload on monday