Filters inside Modal component issue

[ttnbtfy]

Hi, has anyone tried using a Filters inside a Modal component?
I attempted it, but I encountered some issues. Did I do something wrong?

// Check my examp code.

import { useState } from 'react';
import { ChoiceList, Select, Spinner, ResourceList, ResourceItem, Thumbnail, Text, InlineStack, Checkbox, Box, BlockStack, Button, Filters } from '@shopify/polaris';
import { Modal, TitleBar } from '@shopify/app-bridge-react';

export function SimpleProductPicker() {
	// Filter.
	const [accountStatus, setAccountStatus] = useState(undefined);
	const [queryValue, setQueryValue]       = useState(undefined);

	function isEmpty( value ) {
		return Array.isArray( value ) ? value.length === 0 : ( value === '' || value == null );
	}

	const filters = [
		{
			key: "accountStatus",
			label: "Account status",
			filter: (
				<ChoiceList
					title="Account status"
					titleHidden
					choices={[
						{ label: "Enabled", value: "enabled" },
						{ label: "Not invited", value: "not invited" },
						{ label: "Invited", value: "invited" },
						{ label: "Declined", value: "declined" }
					]}
					selected={()=> console.log( 1 )}
					onChange={() => console.log( 2 )}
					allowMultiple
				/>
			),
			shortcut: true
		}
	];

	const appliedFilters = []
	if (!isEmpty(accountStatus)) {
		const key = "accountStatus"
		appliedFilters.push({
			key,
			label: disambiguateLabel(key, accountStatus),
			onRemove: () => console.log( 3 )
		});
	}

	return (
		<>
			<Modal id="products-picker" open={ open } onHide={ onClose }>
				<TitleBar title={ `Select products` } />

				<BlockStack>
					<Box paddingBlock="150" paddingInline="0" position="sticky" insetBlockStart="0" zIndex="10" borderBlockStartWidth="025" borderColor="border" background="bg-fill" id="size-chart-popup-picker-filter">
						<Filters queryValue={ queryValue } filters={ filters } appliedFilters={ appliedFilters } onQueryChange={() => console.log( 22 ) } onQueryClear={ () => console.log( 33 )} onClearAll={ () => console.log( 44 )}>
							<Select label="Sort by" labelInline onChange={() => console.log( 1 )} value="newestUpdate" options={[
								{label: 'Newest update', value: 'newestUpdate'},
								{label: 'Oldest update', value: 'oldestUpdate'},
								{label: 'Most spent', value: 'mostSpent'},
								{label: 'Most orders', value: 'mostOrders'},
								{label: 'Last name A–Z', value: 'lastNameAlpha'},
								{label: 'Last name Z–A', value: 'lastNameReverseAlpha'},
							]} />
						</Filters>
					</Box>

					{ loading ? <Spinner accessibilityLabel="Loading" size="large" /> :
						<ResourceList
							resourceName={resourceName}
							items={filteredItems}
							renderItem={ item => {
								const { id, title } = item;
								const image         = item?.featuredMedia?.preview?.image?.url ?? undefined;

								return (
									<ResourceItem
										id={id}
										accessibilityLabel={`Select ${title}`}
										verticalAlignment="center"
										onClick={() => handleCheckboxChange(id)} >
										<Box paddingInline="100">
											<InlineStack gap="400">
												<Checkbox
													label={`Select ${title}`}
													labelHidden
													checked={selectedIds.includes(id)}
													onChange={() => handleCheckboxChange(id)}
												/>

												<InlineStack gap="300">
													{ image && <Thumbnail source={ image } alt={ title } size="small" />}
													<Text variant="bodyMd">{ title }</Text>
												</InlineStack>
											</InlineStack>
										</Box>
									</ResourceItem>
								);
							}}
							emptyState={emptyStateMarkup}
						/>
					}
				</BlockStack>

				<Box paddingBlock="500" paddingInline="300" position="sticky" insetBlockEnd="0" zIndex="10" borderBlockStartWidth="025" borderColor="border" background="bg-fill">
					<InlineStack align="end" gap="200">
						<Button size="medium" onClick={ onClose }>Cancel</Button>
						<Button size="medium" variant="primary" loading={ loading } onClick={ handleSubmit }>Select</Button>
					</InlineStack>
				</Box>
			</Modal>
		</>
	);
}

// Check my image issue.

[muchisx]

Wrap it with PolarisProvider as such - this will provide context for the root of the polaris components within the modal

import { AppProvider as PolarisAppProvider } from '@shopify/polaris';

      <PolarisAppProvider i18n={{}}>
        <Content />
      </PolarisAppProvider>

[ttnbtfy]

Hi @muchisx, I tried the new code as you provided but it still doesn't change and also the label is missing
Can you check my new image?
Is it possible that I did it wrong? Please let me know, thank you.

import { AppProvider as PolarisAppProvider } from '@shopify/polaris';

<PolarisAppProvider i18n={{}}>
    <Modal id="products-picker" open={ open } onHide={ onClose }>
    </Modal>
</PolarisAppProvider>

[muchisx]

@ttnbtfy put the provider inside the modal

[ttnbtfy]

Hi @muchisx , I tried but still no success, I think I will skip Filter in Modal, thanks for your help 🥰