Bug: s-select inside s-modal always shows initially-selected option after opening modal

Extensions
1

I have a checkout UI extension using Preact with @shopify/ui-extensions version 2025.10.8. I’m required to add a “select” control inside a modal, but am finding that whenever the modal is opened, the control ignores the currently-selected option and always shows the initially-selected option instead:

Source code for the above example:

import { render } from 'preact';
import { useState } from 'preact/hooks';

const options = [0, 1, 2];

const TestApp = () => {
  const [selected, setSelected] = useState(0);

  return (
    <>
      <s-button commandFor="test-modal">Open modal</s-button>
      <s-modal id="test-modal">
        <s-stack>
          <s-text>Selected value: {selected}</s-text>

          <s-select
            label="Select a value"
            value={selected.toString()}
            onChange={({ currentTarget }) => {
              if (!currentTarget) return;
      
              const selected = Number((currentTarget as HTMLSelectElement).value);
              setSelected(selected);
            }}
          >
            {options.map((i) => (
              <s-option
                key={i}
                value={i.toString()}
              >
                {i}
              </s-option>
            ))}
          </s-select>
        </s-stack>
      </s-modal>
    </>
  );
};

export default () => {
  render((<TestApp />), document.body);
};

The selected value in state is updated and rendered correctly inside the modal each time it’s opened, but the select control always shows the initially-selected value after the modal is opened. You can change the initial value of selected in the example above to 1 and the control will always show 1 each time the modal is opened, even if that isn’t the selected value.

This behaviour seems like a bug relating to the way that s-modal and s-select behave together.

1 Like
2

Thanks for sharing @AndyPye, our team will look into it.