0

Clicking in spinner in Chrome datapicker causes continuous scroll in Chrome.

To reproduce, open latest demo

http://www.ok-soft-gmbh.com/jqGrid/OK/dateInput_48_bootstrap.htm

from answer

How to use native date picker in both form and row editing in free jqgrid

in Chrome , click in date to edit.

Click in up or down spinner and keep cursor in this spinner. Date scrolls indefinitely.

How to fix this so that single click increments or decrement value only by +1 or -1 ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

1

I think that one have to use use ::-webkit-inner-spin-button which allows to customize input spinners in CSS3 (see here). The problem is just it's really difficult to find the documentation of CSS properties which can be used in the case. The only well-known setting is

input[type=date]::-webkit-inner-spin-button {
    display: none;
}

which just remove the spinner. No spinner - no problem. It's probably exist a better way to customize the spinner, but I didn't found it.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • In plain page `` the issue does not occur. So it is related to jqgrid. Some jqgrid or jquery-ui setting causes it. Maybe click evet propagation is not stopped – Andrus Mar 29 '15 at 08:56
  • @Andrus: I disagree with you. Try [the demo](http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date) or [this one](http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number). **All examples** which I could find in internet with ` – Oleg Mar 29 '15 at 09:36
  • I tried all 3 demos referenced. Issue does **not occur** in those demos. Issue occurs only in demo referenced in question: If mouse button is released but cursor is over spinner button, scrolling continues. – Andrus Mar 29 '15 at 11:13
  • @Andrus: I think that we use different version of chrome or the problem can depend on settings of web browser or some other aspects. I use Chrome 41 64-bit on Windows 7 and **all above demos** like all examples which I ever find on the web with `` or `` have absolutely identical behavior. – Oleg Mar 29 '15 at 11:20
  • I'm using also Chome 41.0.2272.101 m in Windows 7 x64. I pressed `reset all settings` button in Chrome and re-started Chrome. Results are the same: issue occurs only in demo referenced in question. – Andrus Mar 29 '15 at 11:27
  • @Andrus: I have the same version of Chrome. I don't want to reset the settings. I verified that the same behavior is on another Windows 8.1 computer with the same version of Chrome. – Oleg Mar 29 '15 at 11:30
  • According to http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/ tip 12 You can select `Show user agent shadow DOM` in Chrome to see native datepicker structure and customize it – Andrus Apr 07 '15 at 20:15
  • @Andrus: Of cause I used before "Show user agent shadow DOM" property in Chrome, but the setting only shows **existing** DOM structures and properties of `webkit-inner-spin-button`, but it give no tips which setting is responsible for the timeout and the speed of auto-repeat. I even have downloaded the source code of Webkit, but I could not find nothing which can be directly used to solve the problem. – Oleg Apr 07 '15 at 20:21