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

Richard687
Tourist
10 0 2

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!

Replies 2 (2)
Richard687
Tourist
10 0 2

After a lot of head-scratching (and zero help from Shopify), I found a workaround to this. In case anyone else is having similar difficulty, here it is...

Add a key attribute to the <ResourcePicker/> element, and increment (or otherwise change) the value each time it is opened.

This forces React to create a new ResourcePicker component instead of updating the existing one. Being very new to React, I don't know if this is a kosher way of doing things, but it seems to work. Hope this helps someone.

 

starman
New Member
1 0 0

this works for me, but It's not the best solution:

<ResourcePicker // Resource picker component
 ...
  onSelection={(resources) => handleSelection(resources)}
  onCancel={() => setOpenPicker(false)}
/>

//and force close the picker in the handleSelection function

const handleSelection = (resources) => {
    setOpenPicker(false);
    ......
 };

 I guess the problem, is that the picker never closed when you select a product!!