Force non-input component to be disabled so style element state triggers?

I have a clickable flex container (it has a mouse click event handler), but I also have an enabled condition on being able to click it, as well as a style class assigned to it. I want to make use of the class' disabled element state to display it greyed out rather than having to bind to the style.class to change it to another "disabled" class. Can I force the flex container's enabled condition somehow to do this?

Hi,

Unfortunately, containers cannot use the disabled condition. This link on The HTML Disabled Attribute explains what types of HTML elements can use the disabled property. The containers in Ignition are div elements, so they cannot use that attribute.

However, you could create a custom property that applies the style class, and add an IF statement to your onClick event that will require the custom property to be in a certain state before it runs any of the code.

1 Like

Ah, that makes sense, cheers!

Regarding this part however:

The pointer-events: none style still works here to disable all click actions, so the if condition isn't needed. I'll add this into my "Disabled" P.Style

1 Like

Sounds like a great solution! Nice workaround

1 Like