Select input not triggering Contextual Save Bar

Extensions
1

Hi! When building a Block extension with <Form /> as described in the docs (Using Forms), the recommended pattern for dirty-state management is to use defaultValue on inputs. Example:

<Form onSubmit={handleSubmit} onReset={handleReset}>
  <TextField
    label="Name"
    defaultValue={defaultName}
    value={currentName}
    onChange={setCurrentName}
  />
</Form>

This works fine for TextField (docs).

But when trying the same with Select, it doesn’t work:

<Form onSubmit={handleSubmit} onReset={handleReset}>
  <Select
    label="Category"
    defaultValue={defaultCategory} //ignored
    value={currentCategory}
    onChange={setCurrentCategory}
    options={[
      {label: "Option A", value: "a"},
      {label: "Option B", value: "b"},
    ]}
  />
</Form>

defaultValue is ignored because Select doesn’t list it in the props (docs), leaving only value.

Because of this, the dirty-state contract described in the Form docs can’t be achieved - you can’t reset or properly manage dirty state for a Select.

Is this a bug, or is there a recommended workaround for handling default values and dirty state with Select inside a Form?

Thanks in advance for any guidance.

1 Like
2

Did you manage to find a fix?

3

Hey @RandomUser77

Unfortunately not yet - still waiting for a reply on this thread, hopefully someone from the Shopify dev team can clarify it soon.