Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ScrollBar up/down buttons in table - have to click several times to scroll #9538

Open
sambu16 opened this issue Jun 5, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@sambu16
Copy link

commented Jun 5, 2018

When showing a table with multiple rows such that it displays a vertical scroll bar, it takes several clicks on the up/down buttons to get the grid to scroll.
Application.zip

To reproduce, run the attached application.js, which is just an extract from the playground to generate a table and some rows. Clicking the down arrow in here takes 3 or 4 clicks to scroll one row. The desired behaviour is that it scrolls the default amount for one click.

This is happening on my Win10 box, with Chrome Version 66.0.3359.18

I think the problem stems from the fact that the button click has an animation duration. The animation sends a frame event which updates the position, which cancels the animation and the end point is never reached.

Call Stack for the animation being cancelled:

qx.bom.AnimationFrame.prototype.cancelSequence() (AnimationFrame.js:111)
qx.ui.form.Slider.prototype.stopSlideAnimation() (Slider.js:969)
qx.ui.form.Slider.prototype.slideTo() (Slider.js:944)
qx.ui.core.scroll.ScrollBar.prototype.scrollTo() (ScrollBar.js:361)
wrappedFunction (Interface.js:538)
qx.ui.table.pane.Scroller.prototype.setScrollY() (Scroller.js:551)
qx.ui.table.Table.prototype._onScrollY() (Table.js:1366)
qx.event.dispatch.Direct.prototype.dispatchEvent() (Direct.js:134)
wrappedFunction (Interface.js:538)
qx.event.Manager.prototype.dispatchEvent() (Manager.js:873)
qx.event.Registration.fireNonBubblingEvent() (Registration.js:337)
qx.core.Object.prototype.fireDataEvent() (MEvent.js:230)
qx.ui.table.pane.Scroller.prototype._onScrollY() (Scroller.js:866)
qx.event.dispatch.Direct.prototype.dispatchEvent() (Direct.js:134)
wrappedFunction (Interface.js:538)
qx.event.Manager.prototype.dispatchEvent() (Manager.js:873)
qx.event.Registration.fireEvent() (Registration.js:304)
qx.ui.core.scroll.ScrollBar.prototype.setPosition() (VM1763:formatted:36)
qx.ui.core.scroll.ScrollBar.prototype._onChangeSliderValue() (ScrollBar.js:451)
qx.event.dispatch.Direct.prototype.dispatchEvent() (Direct.js:134)
wrappedFunction (Interface.js:538)
qx.event.Manager.prototype.dispatchEvent() (Manager.js:873)
qx.event.Registration.fireEvent() (Registration.js:304)
qx.core.Object.prototype.fireEvent() (MEvent.js:179)
qx.ui.form.Slider.prototype._applyValue() (Slider.js:1085)
qx.ui.core.scroll.ScrollSlider.prototype.setValue() (VM1765:formatted:32)
(anonymous) (Slider.js:1006)
qx.event.Emitter.prototype.emit() (Emitter.js:174)
clb (AnimationFrame.js:97)
clb (AnimationFrame.js:182)
requestAnimationFrame (async)
qx.bom.AnimationFrame.request() (AnimationFrame.js:185)
qx.bom.AnimationFrame.prototype.startSequence() (AnimationFrame.js:102)
qx.ui.form.Slider.prototype.__animateTo() (Slider.js:1015)
qx.ui.form.Slider.prototype.slideTo() (Slider.js:947)
qx.ui.form.Slider.prototype.slideBy() (Slider.js:929)
qx.ui.core.scroll.ScrollBar.prototype.scrollBy() (ScrollBar.js:375)
wrappedFunction (Interface.js:538)
qx.ui.core.scroll.ScrollBar.prototype._onExecuteEnd() (ScrollBar.js:433)
qx.event.dispatch.Direct.prototype.dispatchEvent() (Direct.js:134)
wrappedFunction (Interface.js:538)
qx.event.Manager.prototype.dispatchEvent() (Manager.js:873)
qx.event.Registration.fireEvent() (Registration.js:304)
qx.core.Object.prototype.fireEvent() (MEvent.js:179)
qx.ui.form.SplitButton.prototype.execute() (MExecutable.js:111)
wrappedFunction (Interface.js:538)
qx.ui.form.RepeatButton.prototype._onPointerUp() (RepeatButton.js:320)
qx.ui.core.EventHandler.prototype._dispatchEvent() (EventHandler.js:315)
qx.event.dispatch.AbstractBubbling.prototype.dispatchEvent() (AbstractBubbling.js:208)
qx.core.Object.prototype.base() (Object.js:139)
qx.event.dispatch.MouseCapture.prototype.dispatchEvent() (MouseCapture.js:106)
qx.event.Manager.prototype.dispatchEvent() (Manager.js:873)
qx.event.Registration.fireEvent() (Registration.js:304)
qx.event.handler.Pointer.prototype._fireEvent() (Pointer.js:137)
qx.event.handler.Pointer.prototype._onPointerEvent() (Pointer.js:168)
(anonymous) (Function.js:337)
@oetiker

This comment has been minimized.

Copy link
Member

commented Jun 5, 2018

which version of qooxdoo are you using ?

@level420

This comment has been minimized.

Copy link
Member

commented Jun 5, 2018

Verified using the demo browser with http://www.qooxdoo.org/devel/demobrowser/#table~Table.html and http://www.qooxdoo.org/current/demobrowser/#table~Table.html for
Chrome 67, Firefox 61.0b10 and IE11 on Win7x64.

Clicking on the "scroll down button" does not move one line as expected. You have to click four or five times on the button to scroll one line down.

Note that this behaviour is only true when NOT using native scrollbars. If native scrollbars are used, a single click moves the table one or more rows down on the first click.

@level420

This comment has been minimized.

Copy link
Member

commented Jun 5, 2018

It seems that in the demo browser example the single click is processed, as the scroll drag button moves a fiew pixels on each click, until a "watermark" is reached and the table scrolls one row.

It may be that the algorithm has to be reviewed regarding on what is supposed to happen on a single click.

All this for non native scroll bars.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.