Problem/Motivation

In the Settings Tray module when you open the menu block forms it can be difficult to scroll to below the "Save" but to get to the advanced options link. when you scroll to the bottom it will jump back up.

Not sure if this is just because the forms are the tallest the module opens or because they have a table.

core/misc/tableheader.js does have logic around scrolling.

It would be good to test a fake off-canvas tray with just a lot of text but now table.

Proposed resolution

Fix it.

Remaining tasks

User interface changes

API changes

Data model changes

Comments

tedbow created an issue. See original summary.

tedbow’s picture

Issue summary: View changes
FileSize
669 bytes

Ok here is patch that just makes a use of the tray that has long string where you would need to scroll to get to the bottom.

  1. Turn on the test module off_cavnas_test
  2. Go to /off-canvas-test-links
  3. Click "Click Me 1!"
  4. Try to scroll to the bottom

No I don't think the problem is a table or anything to do with the menu forms.

This happens in this test also.
Basically when trying to scroll to the bottom of the tray it will also scroll the body and "pop" you back to a little before the bottom of the tray.
This happens until the bottom of the main page is reached also. Then it will not "pop" back in the tray.

Here is video that demonstrates this https://youtu.be/eTNTgpMuGiA

tedbow’s picture

Title: In Settings Tray the when using the menu form it is tricky to scroll to the very bottom. » In Settings Tray the when form is longer than page body it is tricky to scroll to the very bottom.

Updating title because it doesn't just happen with Menu form

tim.plunkett’s picture

Priority: Minor » Normal

From my interaction with settings tray, I'd almost call this major. It is very frustrating 😅

drpal’s picture

Status: Active » Needs review
Issue tags: +JavaScript
FileSize
1.42 KB

- Fixes an issue with long forms having their scroll percentage reset after 100% scroll was reached and the scroll event was bubbled up to the parent.

drpal’s picture

Broken behavior,

Fixed behavior,

tedbow’s picture

Status: Needs review » Reviewed & tested by the community

@drpal thanks for the fix. I have tested this out manually and it fixes the problem for me.

I have looked into how we might test this and I don't think this is something our Javascript testing .

The only related function I found was \Zumba\GastonJS\Browser\BrowserMouseEventTrait::scrollTo but this only deals with the "page" and doesn't deal individual elements.

I think this could get committed without a Javascript test because is well documented in this issue how to reproduced the error manually. Especially considering what much more important things in Drupal core have no JS functional testing at all.

  • webchick committed 44bc1e4 on 8.4.x
    Issue #2888305 by drpal, tedbow: In Settings Tray the when form is...
webchick’s picture

Version: 8.4.x-dev » 8.3.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)
Issue tags: +Novice

Thanks so much for those moving GIFs; SO HELPFUL in figuring out what bug is being fixed!

Committed and pushed to 8.4.x. Looks like it could use a backport to 8.3.x too at some point, if someone has time (there are es6 hunks in here so I don't think it will apply). Tagging as novice, since it seems like this fix would be pretty straight-forward to backport.