Keyboard input not working on some VInput text fields and email fields properly

Question

Keyboard input not working on some VInput text fields and email fields properly

volkipp opened this issue 5 years ago · 19 comments

With the latest release (0.7.2), VInput with a standard text field no longer allows typing with the keyboard. I tested it out on Chrome, Safari, and Firefox on Mac to make sure it wasn't a browser quirk.

I was able to see it also affects your documentation page here when you attempt to type into the "features" field in the Description section: https://vuetensils.stegosource.com/components/input.html#description

Using type=email, it also appears the first letter typed will not appear. (e.g. if you type "12" it will only display "2"). I found this one on the documentation page as well. Hopefully that helps narrow it down a little!

Answer 1 · 2020-07-27T22:56:24.000Z

Oh what the heck!? Thanks for catching that. I think I found the problem. Urgh.

Answer 2 · 2020-07-28T00:59:20.000Z

@volkipp Can you give it a try with 0.7.3? I think I got it solved for v-model or just value.

Answer 3 · 2020-07-28T21:10:57.000Z

@Stegosource the good news is that it looks like it helped on the text fields! The bad news is that now I'm running into some weird issues with type=select drop downs where they won't select. It seemed like they worked the first time with tabbing into them and selecting using keyboard, but now they appear to be broken using the mouse. I haven't had time to see if it also appeared in 0.7.2 as well, but 0.7.1 there don't appear to be any issues.

If I get a chance later tonight I'll come up with a better sequence to reproduce the problem.

Answer 4 · 2020-07-28T21:33:40.000Z

@volkipp Can you try putting together a codesandbox with your code?

I just tested the following in the Vuetensils playground and it seems to be working fine:

<template>
  <div>
    {{ selected }}
    <VInput
      v-model="selected"
      label="select"
      name="select"
      type="select"
      :options="['option 1', 'option 2', 'option 3', 'option 4']"
    />
    <button @click="selected = 'option 4'">select 4</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: 'option 2'
  })
}
</script>

https://vuetensils.stegosource.com/components/Input.html#input-types

Tested with just setting the :value attribute, using v-model, and even with multiple attribute.

Answer 5 · 2020-07-29T15:43:33.000Z

Sure thing! I was able to narrow it down a bit. It looks like it might be a VForm issue, or at least an interaction between VForm and VInput. Here's the code sandbox:

https://codesandbox.io/s/flamboyant-tree-b7ge2

Answer 6 · 2020-07-29T16:31:12.000Z

OK, I took a look at your example and did not notice any problem or difference between the two implementations. Tested in Firefox and Chrome on Linux. Can you go to this site and paste the link they give you back here: https://www.whatsmybrowser.org/

Answer 7 · 2020-07-29T17:07:37.000Z

I'm so sorry, that was on me. While I was verifying the bug I set the vuetensils dependency to 0.7.1 and forgot to set it back to 0.7.3. I'm on a Mac, and I've verified Chrome 84.0.4147.89 and Safari 13.1.1 both have the issue. Firefox seems to be happy so I guess it's a webkit thing.

Answer 8 · 2020-07-29T18:07:31.000Z

No worries. I've certainly done similar myself :)

So, when you say you verified both those browsers have the issue, do you mean it still exists in Chrome and Safari on Mac with version 0.7.3?

Or has the issue been resolved with 0.7.3?

Answer 9 · 2020-07-29T19:44:50.000Z

I changed that code sandbox back to use 0.7.3 to help in debugging, though you might want to double check the package.json. 0.7.3 does not work for VInput selects inside a VForm on Chrome or Safari on the Mac. I also tested 0.7.3 on iOS 13.6 Safari, and that also has the same bug with VInput inside VForm in that code sandbox.

Answer 10 · 2020-07-29T19:53:46.000Z

So to add to the fun, I opened up BrowserStack Chrome on Windows 10 does not have the same bug. If you can't reproduce on Linux this may be a Mac and iOS specific bug with 0.7.3.

Answer 11 · 2020-07-29T20:26:07.000Z

Yeah, I got a remote session in on a Mac machine and also confirmed this seems to be isolated to VInput inside VForm on Mac.

Thanks for the help with reporting this. Will be hard to debug without a Mac to dev on, but I think I can get it sorted.

Answer 12 · 2020-07-30T00:58:20.000Z

Platform specific bugs are definitely the least fun to debug. Let me know if there's anything I can do to help.

Answer 13 · 2020-07-30T02:25:04.000Z

Thanks. Yeah, I took a stab at it with what tools I have at my disposal, but I dont think I'm actually going to be able to debug this myself. I dont know if you've broken into the codebase much, but I THINK it's somehwat straightforward if you want to take a crack at it. I'll also ask some of my dev friends and see if anyone is keen to take a look.

Answer 14 · 2020-07-30T23:40:05.000Z

@Stegosource Hi, how are you?

I went ahead and it give a try, and this is what I found:

It looks like the v-model is not working when the select is nested inside the form
Adding a @input listener and using that to modify this.localValue does the trick and doesn't break the "no form" variant

If this is an acceptable approach, let me know and I can open a PR.

Anyway, I'll keep looking on why v-model is not working as expected

Answer 15 · 2020-07-31T00:49:46.000Z

@Tintef any PR would be very much appreciated. It's a bit beyong me why this wouldn't work in the very specific case of Mac+Webkit. I know @TheJaredWilcurt added a little bug fix for this sort of thing when VInput was nested inside VForm. There isn't anything I can see from combining the two that stands out to me though, and until I can get a spare Mac to dev on, I dont have a good way of debugging it.

Also, I'm good. Thanks for asking. How are you? Do you want to share a link to your Vuetensils projects so I can promote them?

Answer 16 · 2020-07-31T00:55:10.000Z

I'm good! 😄

Actually, I just found the real issue (I think...).

When nested on the VForm, the onEvent method of the VForm is called.
So the VInput doesn't updated the internal localValue, instead, that value should get updated by the watcher of the value prop, but that isn't happening 😞

Also, not sure why this would only be an issue on mac+webkit 🤷‍♂️

Currently trying to figure out why

Answer 17 · 2020-08-01T14:55:49.000Z

@volkipp I just published the latest release and tested on Browserstack. Seems to be fixed https://codesandbox.io/s/lively-sea-e97nj?file=/src/App.vue

Thanks for the help @Tintef. Really not sure WHY that fix worked because under the hood, that's what v-model does anyway, but I'm grateful to have someone that could step up and do the testing that I couldn't do myself :)

Answer 18 · 2020-08-01T21:59:49.000Z

I'm not sure either 🤷‍♂️

Answer 19 · 2020-08-03T17:15:24.000Z

@volkipp I just published the latest release and tested on Browserstack. Seems to be fixed https://codesandbox.io/s/lively-sea-e97nj?file=/src/App.vue

That example is working on iOS for me, as well as the Mac. Thanks @Stegosource and @Tintef! What a weird bug