Disabled (but selected) choice automatically unselected

Polaris
1

s-choice-list’s onChange is automatically fired when the list’s choice is disabled and selected.

Example snippet:

import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useState } from "preact/hooks";

function Example() {
  const [values, setValues] = useState<string[]>(["1", "2", "3"]);

  console.log(`\n ${new Date().toISOString()} current values -`, values);

  return (
    <s-admin-block heading="Example">
      <s-choice-list
        name="example"
        label="Example"
        multiple={true}
        values={values}
        onChange={(evt) => {
          const newValues = evt.currentTarget.values;
          console.log(
            `\n ${new Date().toISOString()} onChange, newValues -`,
            newValues
          );
          setValues(newValues);
        }}
      >
        <s-choice disabled={true} value="1">
          One
        </s-choice>
        <s-choice value="2">Two</s-choice>
        <s-choice value="3">Three</s-choice>
      </s-choice-list>
    </s-admin-block>
  );
}

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

image
image1828×767 87.6 KB

Reload the page and notice that onChange is fired automatically, unselecting the disabled choice.

API version: 2026-01. This works fine in version 2025-07.

2

Having disabled selected choices leads to another issue. Clicking “Discard” no longer hides the contextual save bar.

Slightly modified snippet:

import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useState } from "preact/hooks";

const initialValues = ["1", "2", "3"];

function Example() {
  const [values, setValues] = useState<string[]>(initialValues);

  console.log(`\n ${new Date().toISOString()} current values -`, values);

  return (
    <s-admin-block heading="Example">
      <s-form
        onReset={() => {
          console.log(`\n ${new Date().toISOString()} onReset`);
          setValues(initialValues);
        }}
      >
        <s-choice-list
          name="example"
          label="Example"
          multiple={true}
          values={values}
          onChange={(evt) => {
            const newValues = evt.currentTarget.values;
            console.log(
              `\n ${new Date().toISOString()} onChange, newValues -`,
              newValues
            );
            setValues(newValues);
          }}
        >
          <s-choice disabled={true} value="1">
            One
          </s-choice>
          <s-choice value="2">Two</s-choice>
          <s-choice value="3">Three</s-choice>
        </s-choice-list>
      </s-form>
    </s-admin-block>
  );
}

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

3

Moving to Polaris as it seems to be a bug with the component itself.