Filters inside Modal component issue #13751

ttnbtfy · 2025-06-07T14:54:53Z

ttnbtfy
Jun 7, 2025

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 ===
8000
 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 · 2025-06-19T01:39:13Z

muchisx
Jun 19, 2025

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>

3 replies

ttnbtfy Jun 19, 2025
Author

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 Jun 19, 2025

@ttnbtfy put the provider inside the modal

ttnbtfy Jun 19, 2025
Author

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Filters inside Modal component issue #13751

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Filters inside Modal component issue #13751

Uh oh!

ttnbtfy Jun 7, 2025

Replies: 1 comment · 3 replies

Uh oh!

muchisx Jun 19, 2025

Uh oh!

ttnbtfy Jun 19, 2025 Author

Uh oh!

muchisx Jun 19, 2025

Uh oh!

ttnbtfy Jun 19, 2025 Author

ttnbtfy
Jun 7, 2025

Replies: 1 comment 3 replies

muchisx
Jun 19, 2025

ttnbtfy Jun 19, 2025
Author

ttnbtfy Jun 19, 2025
Author