ResourcePicker only opens once (React/Polaris/App Bridge)

Richard687
New Member
1 0 0

I am developing an embedded Admin app using React, Polaris and App Bridge. The app is mostly complete, but I'm having problems with the ResourcePicker component from App Bridge.

I have a "Select product" button as the primary action in the TitleBar component. The first time the button is clicked, it opens the ResourcePicker just fine, and when a product is selected it outputs to the console as expected. However, when the button is clicked again, the ResourcePicker does not open. The state changes, but Redux shows APP::RESOURCE_PICKER::UPDATE instead of APP::RESOURCE_PICKER::OPEN.

This problem does not occur if you cancel out of the ResourcePicker (instead of selecting products) - it will open and close as many times as you want if you click cancel.

Here's the relevant code:

import { TitleBar, ResourcePicker } from '@shopify/app-bridge-react';

class DefaultTitleBar extends React.Component {
	state = { 
		productPickerOpen: false 
	};
	
	constructor(props) {
		super(props);
	}

	openProductPicker = () => {
		this.setState({ productPickerOpen: true });
	}

	closeProductPicker = () => {
		this.setState({ productPickerOpen: false });
	}

	render() {
		const primaryAction = this.props.primaryAction || {
			content: 'Select product',
			onAction: this.openProductPicker,
		};

		return (
			<React.Fragment>
				<TitleBar
					title={this.props.title}
					primaryAction={primaryAction}
					breadcrumbs={this.props.breadcrumbs}
				/>
				<ResourcePicker
					resourceType="Product"
					actionVerb="select"
					showVariants={false}
					selectMultiple={false}
					open={this.state.productPickerOpen}
					onSelection={this.handleSelection}
					onCancel={this.closeProductPicker}
				/>
			</React.Fragment>
		);
	}
	
	handleSelection = (resources) => {
		console.log(resources); 
	}
}

export default DefaultTitleBar;

 

Here is a screenshot from Redux. The events bracketed in green are from the first time the button is clicked (where the ResourcePicker appears successfully) and the events bracketed in red are from the second time it is clicked (where the ResourcePicker remains hidden).

Screenshot 2021-02-19 130443.png

Am I doing something wrong? Is the ResourcePicker not designed to be used in this way? What is the correct way to open a ResourcePicker more than once?

This is my first time developing a Shopify app, the first time I've used React, and my first message on this forum, so apologies if I have missed anything obvious!

0 Likes