[DamienParticipant]

Hi Peter,

It is very puzzling. The older touch devices do not have the problem, only the newer ones, or ones that are being updated.

I’ve been looking into the internal structure of the JQWidget DropdownList and Combobox and discovered a masking DIV that is there behind the listbox in order to stop touch events getting through to controls below. So clearly it is a design goal of the JQWigets programmers to prevent these events from getting through to the underlying controls.

On the older iPhones it does the job nicely, I’ve placed a trap on it to see it intercepting the touch event and preventing it from getting through to the controls underneath. On the IOS 7xx and Android versions the same trap does not work, it is removed too quickly and the touch events are able to get through to the underlying controls.

This makes traversing a form of JQWidgets controls very cumbersome as the on-screen keyboard keeps activating unnecessarily and re-flowing the page. My own users are saying this after the last update where I replaced many of the standard HTML controls with JQWidgets equivalents. If I revert back to the HTML select elements the problem does not occur.

This is why I say it is puzzling. Puzzling that it is a design goal of the JQWidgets programmers to prevent these touch events from getting to any underlying controls but at the same time not prepared to resolve the problem for the most up to date browsers.

Regards

Damien

[DamienParticipant]

Hi Peter,

Thanks very much, I do appreciate it. If it’s any help I’ve discovered that it does do it on Android devices too (Samsung Galaxy), but not on older iPhones and not on any desktop browsers. Very puzzling…

Damien

[DamienParticipant]

Hi Klaus,

We had that problem too, users kept accidentally changing values when scrolling up and down using the mouse wheel. A big problem when the numbers concerned are money!

I found the following solution to work, just add this line right after creating the numeric control:

$.jqx._jqxNumberInput.prototype.wheel = function () { return false; };

It’s probably not technically perfect, but it works,

Cheers

Damien

[Author]

Posts