Dependent Select Dropdown Not Updating Inside Modal Component

[Abin-Sec]

Hi Team,
I’m facing an issue while using select dropdown components inside a modal in SQLPage, and I would like to raise this for review.
Scenario

I have two select dropdowns inside a modal:

• Category dropdown
• Weakness dropdown

Both dropdowns fetch data from the same table (uniform_resource_security_standards).
The Weakness dropdown should load options dynamically based on the selected Category.

Expected Behavior
When a Category is selected:

• The selected value should be available as :Category.
• Cookie value should update.
• Weakness dropdown should refresh based on the selected category.

Actual Behavior

• Inside the modal, selecting a Category does not update :Category.
• Cookie value is not stored.
• Weakness dropdown does not receive the selected category value.
• The same logic works correctly when the dropdowns are placed outside the modal component.

Additional Notes

• Using auto_submit = true is not an option because it triggers a redirect/action immediately, which breaks the modal workflow.
• The issue seems related to form state not refreshing within modal components.

Question

• Is there an officially supported way to create dependent select dropdowns inside modals without triggering a full form submit or redirect?
• Any guidance or recommended pattern for handling cascading dropdowns within modals would be appreciated.

Thanks.

[lovasoa]

Hello @Abin-Sec ! SQLPage requires page reloads for dynamic behaviors, but you can use 'iframe' as embed_mode to allow reloading the modal without reloading the outer page:

parent.sql

select 
    'modal'          as component,
    'modal_1'        as id,
    '/modal_contents.sql' as embed,
    'iframe' as embed_mode,
    450 as height,
    'modal box'  as title;
select 'button' as component;
select 'Open modal'   as title,
       'modal_1'      as modal;

modal_contents.sql

drop table if exists choices;
create temporary table choices(f1 text, f2 text);
insert into choices values ('A', 'A 1'), ('A', 'A 2'), ('B', 'B 1'), ('B', 'B 2');

select 'form' as component, 1 as auto_submit;
select 'select' as type, 'f1' as name, $f1 as value, 
  json_group_array(json_object('label', f1, 'value', f1)) as options
from (select distinct f1 from choices);

select 'select' as type, 'f2' as name, $f2 as value, 
  json_group_array(json_object('label', f2, 'value', f2)) as options
from choices where f1 = coalesce($f1, 'A');

[jafar007jsm-bit]

Hi, thanks for your reply and for the sample code.
It partially helped, but in my real application I’m still facing two problems:

1: About auto_submit = 1 and form action
However, in this case the action link is removed, so the form does not submit to my backend endpoint and the selected values are not saved into the table.

In my use case I need BOTH:

dynamic dropdown refresh (like your example)

and a normal action submission to store data.

Is there a recommended way to keep auto_submit behaviour while still preserving the form action/save functionality?

2: Dropdown value gets fixed after first selection

Another issue is that after selecting one item in the first dropdown:

the selected value becomes fixed

I cannot change it again to another option (2nd or 3rd item).

It feels like the state is not refreshing correctly when used inside my modal + iframe structure.

[lovasoa]

You can use the button component with its form property to create custom form submission buttons: https://sql-page.com/component?component=button

But in your case, the best is probably to have two forms: one that is dynamic, and one that is a traditional static form (that just passes the values from the dynamic form as hidden fields).

Another issue is that after selecting one item in the first dropdown: the selected value becomes fixed. I cannot change it again to another option (2nd or 3rd item).

This is not what I observe:

Screen.Recording.2026-02-11.at.11.39.26.mov