Has anybody encountered perspective dropdowns not respecting the applied style when the component is not enabled?
For any element state on the style class the dropdown text will default to a grey color.
Did you ever find a solution to this problem? I'm having the same issue
Could you provide some more insight into the exact setup of your Dropdown? When I apply a color to my Dropdown option text (as well as the color of the Dropdown at Dropdown.props.style.color) and then examine the Dropdown and its options while disabled, all styling appears correct.
[
{
"type": "ia.input.dropdown",
"version": 0,
"props": {
"value": "one",
"options": [
{
"value": "one",
"label": "one"
},
{
"value": "two",
"label": "two",
"isDisabled": true
}
],
"enabled": false,
"style": {
"color": "#2EFA2C"
},
"dropdownOptionStyle": {
"fontStyle": "italic",
"color": "#FB4E4E"
}
},
"meta": {
"name": "Dropdown"
},
"position": {
"x": 409,
"y": 48,
"height": 36,
"width": 256
},
"custom": {}
}
]
Disabled Dropdown:
Disabled option:
My options are populated from a named query, so it's just a dataset. I'm using a style class that has a 'disabled' Element State defined, so I would expect that it would use that when the control is disabled.
Ah, I don't that's going to work because of how CSS determines whether something is "enabled". I'm pretty sure "enabled" is something that only <input> elements emit and/or are checked against, and so styling based on enabled state would only be applied to the input of the Dropdown; as the options are <div> elements, they would be ignored.
Modify your Dataset used to populate the options to have three columns: label, value, and isDisabled (case-sensitive). As soon as I created a Dataset with this shape I got the desired behavior. The B option is disabled - it's just very subtle.
That's what I figured but thanks for confirming. I can do some scripting on the dataset change to build the options dictionary the way you show it.
Ok, I made the code changes to set the options as an array and it does not do what I want. I think that maybe I didn't do a good job describing my problem.
The issue I have is that when the component is disabled, it does not follow the 'disabled' Element State option set in the style class as the other controls do. For example:
I want a disabled dropdown to display light text on a dark background (see SAP Formula Id). With the same style class selected, I get black text on a dark background (Active Recipes).
Ah, the Dropdown itself has a longstanding issue with how it applies style classes. I'll make a note on the ticket that it continues to be a problem.
Thanks! I appreciate your help
1 Like