JSFiddle - React, Tailwind, and code Playground

by csbenjamin

HTML

<h2>After change more than once</h2>

<p>In this test, every time we make a change to any cell, afterChange the event is fired more than once. Open the console and make a change to any cell.</p>
<div id="table"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="http://handsontable.com/lib/jquery.min.js"></script>
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

var afterChange = function(change,source){
    console.log('afterChange fired. change:',change,'source:',source);
}
var data = [[1],[2],[3],[4],[5],[6],[7],[8]];
$(document).ready(function(){
$("#table").handsontable({
    data: data,
    afterChange:afterChange,
    columns: [
        {
            data: 0,
            type: 'numeric',
            format: '$0,0.00',
            validator: function(a,b){
                if(!a){
                    b(true);
                    return;
                }
                a = a.toString();
                if(/^(=\d*\.?\d*(\+\d*\.?\d*)*|\d*\.?\d*)$/.test(a)){ ///^(=([0-9]\d*(\.\d*)?)(\+[0-9]\d*(\.\d*)?)*|[0-9]+(\.\d*)?)$/
                    b(true);
                    return;
                }
                b(false);
                
            },
        }
    ]
});
})