When a shell submenu is opened, a click anywhere on the page focuses the menu back (scrolling back to the top of the page)

[alexisrc1]

Introduction

I have a one page SQLPage application with a navigating menu on top of the page. when I use the navigation menu to go to a specific component of the page (using the "id" top level parameter) then, once I am on the component, if I click on it I find myself back at the top of the page. It is a big issue if I use the form component for instance, as I cannot fill the form because when I click on the field I'm immediately brought back to the top of the page.

To Reproduce

My one page app:

the name of the sql file is "exemple_bug.sql"

SELECT 
  'dynamic' AS component,
    sqlpage.read_file_as_text('shell_bug.json')::jsonb || jsonb_build_object(
    'sidebar', true,
    'theme', 'dark',
    'menu_item', jsonb_build_array(
      jsonb_build_object(
        'title', 'Your Performance',
        'icon', 'adjustments-alt',
        'link', '#kpis',
        'submenu', jsonb_build_array(
        jsonb_build_object('link', '#kpis_big_number', 'title', 'Vos KPIs vs n-1','icon','')
        )
      ),

      jsonb_build_object(
        'title', 'Formulaire Boutiques',
        'icon', 'file-typography',
        'link', '#retours_boutiques',
        'submenu', jsonb_build_array(
          jsonb_build_object('link', '#retours_boutiques', 'title', 'Formulaire','icon','')
        )
      )
    )
  ) AS properties;

SELECT 'divider' as component;
Select 'text' as component,
'
1. Your Performance 📊
' as title,
CONCAT('Back on top of page when clicking on it, after navigating using the navbar') as contents_md,
'kpis_big_number' as id,
1 as center;

SELECT 'divider' as component;

select 
    'form'            as component,
    'Form cannot be filled when clicking on it after navigating to the form using the navigation menu'            as title,
    'retours_boutiques' as id,
    'Create new user' as validate;
select 
    'First name' as name,
    'John'       as placeholder;

select 
    'Resume'   as name,
    'textarea' as type;

select 
    'I accept the terms and conditions' as label,
    'terms'    as name,
    'checkbox' as type,
    TRUE       as required;

and i'm using a json file for the shell called "shell_bug.json"

{
    "component":"shell",
    "title":"Bug",
    "footer" : "©️ test",
    "link":"/exemple_bug.sql",
    "menu_item":[
        {"title": "Issue Github", "icon":"home-link" }
    ],
    "layout":"fluid"
}

Actual behavior

using editor and from my phone i go back to the top of the page after navigating via the navigation menu

Expected behavior

Not being brought back to the top of the page and being able to fill the form component

Version information

• OS: Windows
• Database: (Postgres]
• SQLPage v037

[lovasoa]

Ok, thanks for the report. I managed to make the following self-contained (sqlite) minimal reproduction:

select 'shell' as component, '{
    "title": "Click here",
    "submenu": [
        {"link": "#destination", "title": "Then here"}
    ]
}' as menu_item;

select 'text' as component, '![](https://placehold.co/10x4000)' as contents_md; --  just makes the page very long
select 'text' as component, 'destination' as id, 'Now click here (should do nothing, but scrolls to the top)' as contents_md;

[lovasoa]

I reported the issue upstream as https://github.com/tabler/tabler/issues/2485

[lovasoa]

Ok, so the source of the bug is https://github.com/twbs/bootstrap/issues/41514. We depend on tabler, which itself depends on bootstrap. The latest bootstrap release fixes the bug, but tabler still need to update to it, make its own release, then we can release a new sqlpage with the new tabler.

[lovasoa]

As a workaround, I'll enable submenu autoclosing, which is not ideal. I'll disable it again when tabler releases a new version with the fix.

[lovasoa]

@alexisrc1 , have a look at https://github.com/sqlpage/SQLPage/releases/tag/v0.37.1