Problem

On clicking a checkbox toggle the viewport jumps to the top of the page. Additionally I found toggles that are not clickable (contrib module)

Steps to reproduce

  1. Go to a page with a checkbox toggle, e.g. any block or admin/config/media/media-settings
  2. Scroll down a bit
  3. Click toggle
  4. See that viewport scrolls to top

Note that this does not happen for toggles inside tabs, e.g. on block config pages. I also checked this on an install with many custom modules and a vanilla drupal 8.8.5 with mo other modules installed.

Setups tested via browserstack

  • Ubuntu 16.04 + FF75 - JUMPS (local)
  • Windows 10 + FF75 - JUMPS
  • Windows 10 + Edge 81 - OK
  • Windows 10 + Opera 67 - OK
  • macOS Catalina FF 75 - OK

Problem 2: Unclickable toggle issue

Additionally if you install switch_page_theme, the toggles on its config page are not clickable (/admin/config/system/switch_page_theme. There is also no change of the cursor on hovering.

Setups tested:

  • macOS Catalina FF 75 - can reproduce
  • Windows 10 + FF75 - can reproduce
  • Windows 10 + Edge 81 - can reproduce
  • Ubuntu 16.04 + Chromium 81 - can reproduce

Both does not happen with claro theme.

gin jumpy toggle

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

anruether created an issue. See original summary.

saschaeggi’s picture

Can you check the console? Do you get any errors? Thanks

anruether’s picture

Nope, nothing there in both cases.

saschaeggi’s picture

Priority: Normal » Major
saschaeggi’s picture

Priority: Major » Normal

Checked this on dev with Chrome, FF & Safari and can't reproduce yet.

anruether’s picture

That is strange! Can I send you credentials for a dev site? (I just installed the site again, with nothing but d8.8.5 and gin 3.x-dev):

  • FF 75 (Ubuntu 1604 +Win10) can reproduce
  • Chrome (Ubuntu 1604 + Win10) cannot reproduce

(Only tested the first glitch)

nisha11’s picture

i have added patch to resolve checkbox toggle button when click , it used to scroll to top and also found module was not working on module switch. As mention by @anruether it was happening in firefox , tested with switch_page_theme module.

anruether’s picture

Thanks nisha11.

I cannot apply the patch. I see two quite obvious issues:

  • The patch is enormous, it adds a lot of stuff, why is that?
  • Then there is some invalid data in it in the beginning
anruether’s picture

Issue summary: View changes
anruether’s picture

See issue summary for some more test details. It seems these are different bugs, the first one is limited to ff (75).

nisha11’s picture

anruether, i have added FF specific css for first one and for problem two i have added js for toggle event which is not getting applied on table checkbox because all the other switches its working correctly. switch_page_theme is inside drag-able table.Please review.
i have removed all complied css and js which was there on my previous patch so after applying the patch you need to compile css and js.

saschaeggi’s picture

I've quickly rerolled the patch from #11.
Please test :)

anruether’s picture

Thanks! This solves both issues!

Only 1 nitpick: For the second issue on hovering over the switch_page_theme checkbox toggle, the cursor does not change to pointer. The markup is different there, we have a table and are inside .tabledrag-cell-content__item element.

saschaeggi’s picture

As I'm still not able to activate this module somehow I did a change "blindly". can you check if this patch solves the cursor?

anruether’s picture

Yes, this works for me. The cursor changes to pointer. Great, thanks a lot!

  • saschaeggi committed 05c8627 on 8.x-3.x
    Issue #3130046 by saschaeggi, nisha11, anruether: On clicking a Checkbox...
saschaeggi’s picture

Status: Needs review » Fixed

Great thanks all. Will do another Alpha release :)

saschaeggi’s picture

Status: Fixed » Closed (fixed)