Error: No themeName was provided. On modal open

[canhnm]

Hello,

We are noticing an issue when trying open modal and there is a ComboBox component in this modal there will be console error: No themeName was provided as on the photo bellow.

Thanks,

[HQCuong]

Hello @canhnm!
I tried to replicate the bug but was unsuccessful. Could you provide me with some additional information, such as:

• Have you wrapped your components inside the AppProvider component?
• Could you give me an example of how you structure the Modal (which components are wrapped, how the props are passed, etc.)?

[canhnm]

Hello,

We are on version 2.0.1

• AppProvider component => Yes, all of the other feature work well.
• Structure is:
  Parent page :

<template>
    <Page :title="$t('breadcrumb.pricing.title')"
        :back-action="$route.query.action == 'finished' ? { content: '', onAction: goToBoard } : ''"
    >
        <InlineStack align="center" style="margin: var(--p-space-400) 0">
            <Button style="border: solid var(--p-border-width-025); padding: var(--p-space-0); box-shadow: var(--p-shadow-0); background-color: var(--p-color-bg-surface-secondary-hover);">
                <Button @click="checked_annually = !checked_a" :class="checked_a ? 'text-button-disable' : ''" :variant="!checked_annually ? 'primary' : 'tertiary'">
                </Button>
                <Button @click="checked_b = !checked_b " :class="!checked_b ? 'text-button-disable' : ''" :variant="checked_annually ? 'primary' : 'tertiary'">
                </Button>
            </Button>
        </InlineStack>
        <Grid>
            <GridCell :key="index"
                v-for="(card, index) in planCards"
                :columnSpan="{ xs: 6, md: 6, lg: 4 }"
            >
                <PlanDetailCard :data="card" @emit-choose-plan="onChoosePlan"></PlanDetailCard>
            </GridCell>
        </Grid>
        <LegacyCard
            style="height: 100%; margin-top: var(--p-space-400)"
        >
            <template #title>
                <CardTitle>
                </CardTitle>
            </template>
            <LegacyCardSection style="height: 100%">
                <LegacyStack distribution="equalSpacing" fill>
                    <LegacyStackItem >
                        <LegacyStack spacing="extraTight">
                            <LegacyStack  spacing="extraTight" style="align-items: baseline;">
                                <Text variant="headingMd">
                                </Text>
                                <LegacyStack alignment="trailing" spacing="tight">
                                    <Text
                                        variant="heading3xl"
                                        style="line-height: var(--p-font-line-height-1200)"
                                    >
                                    </Text>
                                </LegacyStack>
                                <DescriptionText
                                    style="color: var(--p-color-text-secondary)"
                                >
                                </DescriptionText>
                                <Badge
                                    v-if="planCardFreeAndEb.discount"
                                    :status="getStatusBadge(planCardFreeAndEb.discount)"
                                >
                                </Badge>
                            </LegacyStack>
                        </LegacyStack>
                        <DescriptionText
                            v-if="planCardFreeAndEb.desc"
                            style="margin-top: var(--p-space-100); color: var(--p-color-text-secondary);"
                        >
                        </DescriptionText>
                        <DescriptionText v-else style="color: var(--p-color-text-secondary)">
                        </DescriptionText>
                    </LegacyStackItem >
                    <LegacyStackItem >
                        <Button
                            :disabled="planCardFreeAndEb.current_plan"
                            :primary="planCardFreeAndEb.is_update"
                            fullWidth
                            @click="onChoosePlan(planCardFreeAndEb)"
                        >
                        </Button>
                    </LegacyStackItem >
                </LegacyStack>
            </LegacyCardSection>
        </LegacyCard>
        
        
        <SingleFeatureModal :active="showSingleFeature" @close="showSingleFeature = false"/>
        <DowngradePlanModal :active="showDowngradePlanModal"
            :data="dataDowngradePlanModal"
            @close="showDowngradePlanModal = false"
            @downgrade="handleDowngradePlan"
        />
    </Page>
</template>

<script>

And the DowngradePlanModal :

<template>
    <Modal
        sectioned
        :open="active"
        @close="toggle"
        :secondaryActions="[
            {
                content: $t('buttonText.cancel'),
                onAction: () => {
                    handleClose()
                }
            },
            {
                content: $t('pricingText.yes_downgrade', {plan: n_data.plan_name}),
                onAction: () => {
                    handleDowngradePlan()
                },
                destructive: true,
            },
        ]"
    >
        <template #title>
            {{ $t('pricingText.downgrade_to_plan', {plan: n_data.plan_name}) }}
        </template>
        <BlockStack gap="200">
            <Text variant="headingMd">
                {{ $t('pricingText.downgrade_modal.lose_benefits') }}
            </Text>
            <List type="bullet">
                <ListItem v-for="(item, index) in n_data.list" :key="index">
                    <DescriptionText>
                        {{ item }}
                    </DescriptionText>
                </ListItem>
            </List>
            <Banner tone="info">
                <BlockStack gap="200">
                    <DescriptionText variant="headingMd">{{ $t('pricingText.downgrade_modal.title_reason') }}</DescriptionText>
                    <div style="display: none;">
                        <BonDatePicker/>
                    </div>
                    <Listbox @select="handleOptionSelected">
                        <ListboxOption
                            v-for="(option, index) in reasonChoices"
                            :key="index"
                            :value="option.value"
                            :selected="selectedOptions.includes(option.value)"
                        >
                            <div
                                style="
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer
                                "
                            >
                                <!-- eslint-disable-next-line max-len -->
                                <Checkbox style="margin-left: var(--p-space-200)" :checked="selectedOptions.includes(option.value)" />
                                <DescriptionText>
                                    {{ option.label }}
                                </DescriptionText>
                            </div>
                        </ListboxOption>
                    </Listbox>
                    <div v-if="isOnlyOtherReason()">
                        <TextField
                            v-model="otherReason"
                            autoComplete="off"
                            :multiline="4"
                        />
                    </div>
                </BlockStack>
            </Banner>
        </BlockStack>
    </Modal>
</template>

<script>
import SelectIcon from '@shopify/polaris-icons/dist/svg/SelectIcon.svg'
import { mapState } from 'vuex'
import BonDatePicker from '../../components/global/BonDatePicker.vue'
....
</script>

The issue happens once Downgrade Button clicked and DowngradePlanModal show up

[blacklen]

Hi @canhnm, is this issue clear now, or do you have any updates?
We tried to reproduce your issue, but we have not been able to find any indications of what might be causing it.
Could you please upgrade to the latest version and run some tests first? Additionally, try adding a theme prop to AppProvider to see if anything changes.