Cursor jumps to end of input when using Stickit + Html5 email input type and webkit

[kbaribeau]

Hey all,

I just started using stickit and I love it, BUT, I have this issue.

If my template is using the html5 email input type like so:

<input type="email" name="email" class="span12" required />

In my view I have these bindings:

  bindings:
    "input[name=email]":
      modelAttr: "email"

Typing initially into the textbox is fine, but when I try to change it, my cursor gets moved to the end of the line.

Here's a short video: https://dl.dropbox.com/u/80354/stickit-thing.swf

I was able to reproduce this in Safari, Chrome, and the iOS Simulator, but not Firefox.

Thanks!

[davemo]

+1 also seeing this.

[delambo]

@kbaribeau Thanks for the vid - that is very helpful.

I'm having a hard time replicating. Can you let me know what version you are running and any other specifics about your environment. I setup the following fiddle which uses master and it looks fine:

http://jsfiddle.net/px6UP/

[kbaribeau]

Hey, so it turned out I had a second stray event firing that was also changing the value of our email field, which caused the cursor jump.

Thanks for looking, sorry for the trouble.

[KidkArolis]

I'm getting this exact same issue (in your jsfiddle) with the latest version of stickit.

[davemo]

Are you using an additional plugin for validation @KidkArolis ? That's how we ran into this issue in the first place; solved by eliminating the extra plugin we were using 👍

[KidkArolis]

I think the issue comes from stickit itself. It seems to have been introduced by this commit: 805fdf5.

Try the original jsfiddle that @delambo created (it's pointing to the master version of stickit) and you should see the problem.

http://jsfiddle.net/px6UP/

[KidkArolis]

The problem is here:

observeModelEvent('change:'+attr, function(options) {
  if (options && options.bindKey != bindKey)
    updateViewBindEl(self, $el, config, getVal(model, modelAttr, config, self), model);
});

The callback signature is wrong, it should be

observeModelEvent('change:'+attr, function(model, val, options) {
  if (options && options.bindKey != bindKey)
    updateViewBindEl(self, $el, config, getVal(model, modelAttr, config, self), model);
});

[mrchimp]

Just leaving this here in case it helps somebody... I was having the same issue. It turned out I was calling this.stickit() on my view every time the model was validated, which was on each keypress... If you call it that much, you're gonna have a bad time.