We are writing an Admin Block UI Extension and I’ve noticed that I can’t have a form’s checkbox default to being checked and be able to utilize the dirty state of the form / contextual save bar, as described here.
When using the code below the checkbox renders as checked, but unchecking it leaves the form “clean”, then re-checking it (back to the default state) triggers the contextual save bar. I don’t have any means to render the form as being checked and then trigger a need to save once the component is unchecked by a user.
import { useState } from "react";
import {
AdminBlock,
Form,
Checkbox,
reactExtension,
useApi,
} from "@shopify/ui-extensions-react/admin";
export default reactExtension("admin.product-details.block.render", () => <App />);
function App() {
const { i18n } = useApi();
const [backorder, setBackorder] = useState(false);
return (
<AdminBlock>
<Form>
<Checkbox
name="backorder"
label={i18n.translate('labels.backorder')}
defaultValue={true}
checked={true}
onChange={setBackorder}
/>
</Form>
</AdminBlock>
);
}