creativetimofficial / material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
https://www.creative-tim.com/product/material-kit?ref=mk-creativetimofficial-github
MIT License
5.91k stars 1.35k forks source link

onchange event fired multiple times #136

Closed Beastw00d closed 5 years ago

Beastw00d commented 6 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

When I have an input value with the onchange event being listened to it should fire off once when changed.

Current Behavior

When I click the input value with the onchange event being listened to it started firing off continually.

Failure Information (for bugs)

This happens when there is an input element inside a form.

I believe it is something to do with the material-kit.min.js script because when that script isn't included it works fine.

Steps to Reproduce

  1. add a form element
  2. add an input element inside form
  3. add onchange event to the input element that writes to the console
  4. open console and click the input element
<form>
    <input type="text" onchange="console.log('on change fired')" />
</form>

here is a plunker to reproduce: https://plnkr.co/edit/Wls1hWw5jlOChqwj7RNU?p=preview

groovemen commented 5 years ago

Hello @Beastw00d,

Thank you for using our products, this issue it's from the Bootstrap Material Design library so you need to open an issue on their repository. I reproduce this issue in the video from below to see that it's broken on their product.

onChange.zip(video)

You can solve this issue by setting; $('body').bootstrapMaterialDesign({autofill:false});

All the best, Stefan

luchosrock commented 5 years ago

I think this should be bundled by default with the materialkit js library. This is a bug that causes headaches especially in cases when the layout has forms with too many input fields and change event handlers. Hey Creativetim team: may I PR on this? 😺