ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.1k stars 13.51k forks source link

The ion-range web component updates values even when the component is disabled #14093

Closed richardruiter closed 5 years ago

richardruiter commented 6 years ago

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [x] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: When the component is disabled and the value attribute is changed it responds with visually and fires the ionChange event.

Expected behavior: Because the component is disabled I would expect the component to not respond at all.

Steps to reproduce: Focus the input element and change the value. You will see that change is reflected.

Related code:

<input type="number" id="slider-is-disabled-input"></input>
<ion-range id="slider-is-disabled" disabled="true"></ion-range>
<script>
    (function () {
        var slider = document.querySelector('#slider-is-disabled');
        var input = document.querySelector('#slider-is-disabled-input');
        slider.addEventListener('ionChange', function (e) {
            input.value = e.detail.value;
        });
        input.addEventListener('input', function (e) {
            slider.setAttribute('value', e.target.value);
        });
    }());

</script>
paulstelzer commented 5 years ago

Is this issue still exist in beta.17?

ionitron-bot[bot] commented 5 years ago

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!