Bug: Debugbar Click(toggle) Scrolls Document to Top

[acpadhi]

PHP Version

8.2, 8.3

CodeIgniter4 Version

4.4.6

CodeIgniter4 Installation Method

Manual (zip or tar.gz)

Which operating systems have you tested for this bug?

Linux

Which server did you use?

fpm-fcgi

Database

Mariadb

What happened?

CI 4.4.6 : When clicking on Debug toolbar, the document is scrolled automatically to the TOP, as if someone had clicke an achor link to body tag.

Does not happen in 4.4.1, So I inspected the a href tags used (in both the CI versions) for the toggle buton of the debugtoolbar.

4.4.1 : <a id="debug-bar-link" href="**javascript:void(0)**" title="Open/Close">
4.4.6 : <a id="debug-bar-link" href="**#**" title="Open/Close">

I believe somewhere in the toolbar.js either return false is required, or preventdefault is to be used.

This can mess up with JS based routing as well I believe.

Steps to Reproduce

Switch to development mode :

1. Create a Page that has content more than the window height so as to show scrollbars on right side.
2. Scroll down to the bottom of the page.
3. Click on the debugtoolbar toggle button.

It can be noticed that the page scrolls to the top.

Expected Output

Page position should remain as it is and should not scroll at all.

Anything else?

No response

[acpadhi]

Forgot to mark the code with the proper format : Please see below for missing content above.
4.4.1 : <a id="debug-bar-link" href="**javascript:void(0)**" title="Open/Close">
4.4.6 : <a id="debug-bar-link" href="**#**" title="Open/Close">

[ddevsr]

javascript:void(0) will appear error if CSP is enabled, and fixed by #8411

@acpadhi Can you test #8595?

[acpadhi]

I checked those 2 places and the toggle button works fine after removing the href attribute in the anchor tags.
However, it is only 2 places in the entire tpl where the changes are suggested in #8595

The problem is that that entire tpl is full of <a href with # in value. So anywhere in the toolbar when any link(like Vars, Views, theme toggler etc) is cliked, the unwanted behavior happens. I believe all instances of href="#" will need to be removed.

[acpadhi]

Uploading 2 changed files that seems to work for me. Please check if this fixes the issues without any unexpected results.
Removed all the hrefs for <a tags in the tpl, and then added one small line of css in the css files.

toolbar.zip