Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix possibly outdated onChange in color palette's color picker #23136

Merged
merged 1 commit into from
Jun 15, 2020
Merged

Fix possibly outdated onChange in color palette's color picker #23136

merged 1 commit into from
Jun 15, 2020

Conversation

costasovo
Copy link
Contributor

Description

ColorPalette component uses useCallback hook to memoize ColorPicker render function. This memoized renderer is not refreshed when onChange function changes. This causes that onChange function in ColorPicker may become outdated and carries outdated scope. Triggering such an outdated callback may cause issues because it is processed with potentially outdated scope. This PR adds ColorsPalette's onChange callback to the list of dependencies to the memoized ColorPicker render so that the colour picker render method is refreshed after the onChange callback changes.

How has this been tested?

I locally added a component to the ColorsPalette storybook to replicate the issue and checked that the fix works. Without the fix, you can observe that changing colour using the custom colour picker will reset previously set size value.

The component:

export const borderSettings = () => {
	const [ settings, setSettings ] = useState( {
		color: '#f00',
		size: 1,
	} );

	const colorsDef = [
		object( 'Red', { name: 'red', color: '#f00' } ),
		object( 'White', { name: 'white', color: '#fff' } ),
		object( 'Blue', { name: 'blue', color: '#00f' } ),
	];

	console.log(settings);

	return (
		<>
			<RangeControl
				value={ settings.size }
				onChange={ ( val ) => {
					setSettings( {
						...settings,
						size: val,
					} );
				} }
			/>
			<ColorPalette
				colors={ colorsDef }
				value={ settings.color }
				onChange={ ( val ) => {
					setSettings( {
						...settings,
						color: val,
					} );
				} }
			/>
		</>
	);
};

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@@ -66,7 +66,7 @@ export default function ColorPalette( {
disableAlpha
/>
),
[ value ]
[ value, onChange ]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just remove the useCallback call renderCustomColorPicker function. It seems to me that this optimization is not really necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youknowriad I've removed the useCallback and rebased the PR.

@costasovo costasovo requested a review from youknowriad June 15, 2020 16:01
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks for the fix.

@youknowriad youknowriad merged commit bca2518 into WordPress:master Jun 15, 2020
@github-actions github-actions bot added this to the Gutenberg 8.4 milestone Jun 15, 2020
This was referenced Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants