I am trying to use Autocomplete inside the app bridge modal. I am wrapping it in AppProvider as mentioned in “Using modals in your app”. The popover is not positoning correctly inside the modal (variant=“max”) however it works fine if used outside the modal. It should be positioned above the text field:
Here is what my code looks like:
<InlineGrid columns={{ xs: "1fr", md: "2fr 5fr" }} gap="400">
<Box
as="section"
paddingInlineStart={{ xs: "400", sm: "0" }}
paddingInlineEnd={{ xs: "400", sm: "0" }}
>
<BlockStack gap="400">
<Text as="h3" variant="headingMd">
Keyword-based tagging
</Text>
<Text as="p" variant="bodyMd">
Tag products with keywords that are found in their title or description
</Text>
</BlockStack>
</Box>
<Card roundedAbove="sm">
<BlockStack gap="200">
<AppProvider i18n={{}}>
<Autocomplete
preferredPosition="above"
allowMultiple
options={
keywordInputValue
? [{ value: keywordInputValue, label: keywordInputValue }]
: []
}
selected={selectedSettings.autoTagKeywords}
textField={
<Autocomplete.TextField
onChange={updateKeywordText}
label="Keywords to add as tags"
value={keywordInputValue}
helpText="When a keyword is found in the title or d"
error={clientValidationErrors.autoTagKeywords}
autoComplete="off"
verticalContent={
<InlineStack gap="200">
{selectedSettings.autoTagKeywords.map((keyword) => (
<Tag key={keyword} onRemove={removeKeyword(keyword)}>
{keyword}
</Tag>
))}
</InlineStack>
}
/>
}
onSelect={handleKeywordSelect}
/>
</AppProvider>
{/* Hidden inputs for form submission */}
{selectedSettings.autoTagKeywords.map((keyword, index) => (
<input key={index} type="hidden" name="autoTagKeywords" value={keyword} />
))}
</BlockStack>
</Card>
</InlineGrid>
