Keyboard lag when typing in input fields on form with many input/select fields

[Vinnie Murdico]

I have a sample form here: 

https://jsfiddle.net/swbrains/42n5vuwz/ 

that has about 40 text input fields and corresponding select fields. Each select field has about 40 options in it. I have pared down the HTML to just the text and select input fields in a table inside a form.  I have other forms that are more complex than this (more text inputs and selects in a table like this) that actually work fine with no input lag.  This is a "simplified" version of another form that exhibited the issue and even after paring it down to the sample linked above, it still shows the lag when typing in the input fields.

When using Chrome (version 65/64-bit and version 66/64-bit) on Windows 10 (tested on two different Win 10 PCs), typing into any of the edit fields is laggy. It's less noticeable when simply touch typing but can be seen more easily when holding down a character to let it repeat, then holding down the Backspace key to repeat-delete each character. Keypress/browser response is immediate on other pages/forms, but there is a noticeable delay every few characters when using this form and holding down a character to repeat.

When I use the same page on Firefox or MS Edge, the text input fields act perfectly with no lag whatsoever.   Here's what I've tried:

- disabling Chrome's form fill-in option

- enabled and disabled Chrome's hardware acceleration 

- being logged in and out of my google account while using Chrome

- uninstalled and re-installed Chrome

- tried 32 bit and 64 bit versions of Chrome

- tried stable v65 and beta version of Chrome

- disabled all extensions

- running the HTML through an online validator to ensure I wasn't missing a matching tag

Oddly, if I remove the "form" start and end tags, it greatly reduces the lag in the input fields.

I'm stumped as to why this form causes this type of delay, and only in Chrome.  Thanks for any advice you can give as to why this is happening.

[Kurt Lippert]

One workaround:

Replace

<input type="text" ..> 

with

<span contenteditable="true" ... />

No lag (thus far) and noticed no visual difference 

but you lose things like placeholders, etc.

[PhistucK]

You lose the entire form functionality (the fields will no longer exist in the form submission) and if you gather data yourself anyway, the code will need to use innerHTML or textContent rather than value. Not a great workaround...

☆PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

[Kurt Lippert]

Looks like <textarea> tags don't experience the lag issue either, but I think their values can be included in form submissions?

https://www.w3schools.com/tags/att_textarea_form.asp

as PhistucK said tho you'd have to use innerHTML (if gathering values via JS)

buuut... the downside here is you have to accept the visual style of textareas (or use .css to change them)

On Friday, April 20, 2018 at 9:29:25 AM UTC-4, Vinnie wrote:

[Kurt Lippert]

placeholder support for editablecontent items: https://codepen.io/flesler/pen/AEIFc

On Friday, April 20, 2018 at 9:29:25 AM UTC-4, Vinnie wrote: