Onclick event not running on first button click in Mithril

Question

Why does the "click" callback not invoked the first time after some text is entered into the input like in this fiddle?

var app = {};

app.controller = function(){
    this.data = m.prop("");
    this.click = function(){
        alert("button clicked");
    };
};

app.view = function(ctrl){
    return m("html", [
        m("body", [
            m("div", [
                m("p", ctrl.data()),
                m("input[type=text]", { onchange: m.withAttr("value", ctrl.data) }),
                m("button", { onclick: ctrl.click }, "Click")
            ])
        ])
    ]);
};

m.module(document, app);

I'm not familiar with mithril but when I change `ctrl.click` to `ctrl.click()` it works from the first time. — GuyT, Sep 15 '14 at 09:53
Then it executes the function instead of passing. Unfortunately the function is called when rendering the view, so it's not a perfect solution. — Csati, Sep 15 '14 at 11:24

score 12 · Accepted Answer · answered Sep 15 '14 at 15:20

The input's onchange event is triggered on mouse down, which causes the view to redraw, thus making the button move down. The click event is triggered on mouse up (try clicking and holding down the mouse button without typing anything to see what I mean). Usually a fast click has a ~200ms gap between the underlying onmousedown and the onmouseup events due to the physical distance between rest and pressed position on the mouse button's mechanical switch.

So basically, what's happening is:

1 - mouse button gets pressed, triggers onchange

2 - view redraws, and moves button down to make room for the text in the <p>

3 - some time later, the mouse button gets unpressed, triggering the onclick

4 - the event looks at the current position of the mouse (which is on top of the <p> now), so it does not trigger the event on the button

You can see that this is the case by typing something, then clicking and holding down the mouse button, then dragging the cursor over the button again.

In order to avoid this problem, you can use a onmousedown instead of a onclick so that both onchange and onmousedown happen within the same animation frame, or if the UI permits, you can move the <p> below the button.

Ahhhh.. hadn't thought about that one. Thanks! Clear answer! — GuyT, Sep 16 '14 at 08:42
but the problem is, when I call `alert()` in the `onmousedown` event, the value of the text field is not reflected at the first time.. (and then it reflects the value of the previous state) — technophyle, Oct 12 '15 at 19:03

Onclick event not running on first button click in Mithril

1 Answers1