TextArea Disabled Styling Inconsistent

4 posts, 1 answers
  1. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 08 Jan Link to this post

    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

  2.
  3. Answer
    Silviya
    Admin
    Silviya avatar
    440 posts

    Posted 11 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 11 Jan in reply to Silviya Link to this post

    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

  7. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 3 days and 13 hours ago Link to this post

    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
  8.
Back to Top