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

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