JSFiddle - React, Tailwind, and code Playground

Distinguishing programmatic set vs. user input on textbox widgets

by kfranqueiro

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/document.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">

JavaScript

require([
    "dijit/form/TextBox",
    "dijit/form/Button",
    "dojo/aspect",
    "dojo/domReady!"
], function(TB, Button, aspect){
    aspect.after(TB.prototype, "_setValueAttr", function(value){
        if(!this._userModified){
            this._set("modifiedByUser", false);
        }
        this._userModified = false;
        console.log('set', this.modifiedByUser);
    }, true);
    
    aspect.after(TB.prototype, "_onInput", function(){
        this._userModified = true;
        this._set("modifiedByUser", true);
        console.log('input', this._userModified);
    }, true);
    
    var tb = new TB({value: "hi"}).placeAt(document.body);
    tb.startup();
    tb.set("value", "foo");
    
    var b = new Button({label: 'check'}).placeAt(document.body);
    b.on('click', function(){
        console.log(tb._userModified, tb.modifiedByUser);
    });
    b.startup();
    
    var reset = new Button({label: 'reset'}).placeAt(document.body);
    reset.on('click', function(){ tb.reset(); });
    reset.startup();
});