Choice `details` not rendering

Extensions
1

In the following example, the Choice details does not render.

Tried both with a DateField or Text components, but both dont render.

Customer account fullpage extension:

api_version = "2025-01"

"@shopify/ui-extensions": "2025.7.1",
"@shopify/ui-extensions-react": "2025.7.1",

import {
  BlockStack,
  Button,
  Choice,
  ChoiceList,
  DateField,
  Form,
  Modal,
  Page,
  Text,
} from '@shopify/ui-extensions-react/customer-account';
import { useState } from 'react';

export const Main = () => {
  const [option, setOption] = useState<string>('');
  const [date, setDate] = useState<string>('');
  return (
    <Page
      title="Example"
      primaryAction={
        <>
          <Button
            overlay={
              <Modal>
                <Text>Current selected option: {option}</Text>

                <Form
                  onSubmit={() => {
                    //
                  }}
                >
                  <BlockStack spacing="base">
                    <ChoiceList name="reschedule" variant="base" value={option} onChange={val => setOption(val[0])}>
                      <Choice id="1">Option 1</Choice>

                      <Choice
                        id="2"
                        details={<DateField label="YYYY-MM-DD" value={date} onChange={val => setDate(val)} />}
                      >
                        Calendar
                      </Choice>
                    </ChoiceList>
                  </BlockStack>
                </Form>
              </Modal>
            }
          >
            Active
          </Button>
        </>
      }
    >
      Content
    </Page>
  );
};
1 Like
2

Hey there!

Thanks for reaching out about this issue you’re facing with Customer Account UI Extensions.

Interestingly, I’m not able to get that details prop of the Choice component to render in a block extension target either so it doesn’t seem like the issue is exclusive to the full-page extension target.

Thanks for reporting this to us! Let me investigate this further and get back to you.

In the meantime, I recommend this approach as a workaround:

 {option.includes('2') && (
              <DateField 
                label="Select date (YYYY-MM-DD)" 
                value={date} 
                onChange={(val) => setDate(val)} 
              />
  )}

Paige

4

Hi again,

Just wanted to provide an update that we’re currently working on a fix for this. I’ll provide an update when the changes have pushed :slight_smile: