[Solved] TextArea Disabled Styling Inconsistent

[Kyle]

It appears that when we disable the TextArea, it does not match the styling of the other input components. My initial thought is that this is because of two things:

1. The <span class="k-textarea"> needs a k-state-disabled applied.
2. The themes need something like the following in the .scss:

.k-textarea {
    &:disabled,
    &[disabled],
    &.k-state-disabled {
        @include disabled( $disabled-styling );
        // Disabled selection
        &::selection {
            @include fill ( $color: $input-color, $bg: transparent );
        }
    }
}

 

I could be way off base here, of course.  Here's a StackBlitz showing the issue with a current, ugly, workaround: https://stackblitz.com/edit/react-s8ugrr-57r5pk?file=app/main.jsx

[Silviya]

Hello Kyle,

Thank you for bringing this issue to our attention! You are right, there should be a k-state-disabled class applied to the span element in order for the disabled styling to be set correctly.

We will add this fix in our next dev version. In the meantime, you can apply the class via className property: 

https://stackblitz.com/edit/react-weewcx?file=app/main.jsx

As a token of gratitude, I updated your Telerik Points.

Best Regards,
Silviya
Progress Telerik

[Kyle]

Silviya,

This is perfect; thank you! I must've overlooked that .k-textarea already has the .k-state-disabled fill in _layouts.scss. DERP!

Kyle

[Kyle]

Confirmed the fixed today in 4.3.0: https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/#def3e9c3-6da9-5c27-877b-c85605f7a6a1