Fix "React does not recognize the instanceId prop on DOM element warning" with usage of ProductControl component

[nerrad]

Describe the bug
This error and stack trace is in the console when editing a block using the <ProductsControl> component:

click to view error

Warning: React does not recognize the `instanceId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `instanceid` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in button (created by ForwardRef(Button)) in ForwardRef(Button) (created by MenuItem) in MenuItem (created by WithInstanceId(MenuItem)) in WithInstanceId(MenuItem) (created by SearchListItem) in SearchListItem (created by SearchListControl) in div (created by NavigableContainer) in NavigableContainer (created by ForwardRef(NavigableContainer)) in ForwardRef(NavigableContainer) (created by ForwardRef(NavigableMenu)) in ForwardRef(NavigableMenu) (created by MenuGroup) in div (created by MenuGroup) in MenuGroup (created by WithInstanceId(MenuGroup)) in WithInstanceId(MenuGroup) (created by SearchListControl) in div (created by SearchListControl) in SearchListControl (created by WithInstanceId(SearchListControl)) in WithInstanceId(SearchListControl) (created by WithSpokenMessages(WithInstanceId(SearchListControl))) in WithSpokenMessages(WithInstanceId(SearchListControl)) (created by WithState(WithSpokenMessages(WithInstanceId(SearchListControl)))) in WithState(WithSpokenMessages(WithInstanceId(SearchListControl))) (created by ProductsControl) in ProductsControl (created by ProductsBlock) in div (created by ProductsBlock) in div (created by Placeholder) in div (created by Placeholder) in Placeholder (created by ProductsBlock) in ProductsBlock (created by WithSpokenMessages(ProductsBlock)) in WithSpokenMessages(ProductsBlock) (created by edit) in edit (created by Edit) in Edit (created by WithToolbarControls(Edit)) in WithToolbarControls(Edit) (created by WithInspectorControl(WithToolbarControls(Edit))) in WithInspectorControl(WithToolbarControls(Edit)) (created by WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))) in WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))) in Unknown (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(Component) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithMultipleValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))) (created by WithFilters(Edit)) in WithFilters(Edit) (created by BlockEdit) in BlockEdit (created by HoverArea) in BlockCrashBoundary (created by HoverArea) in div (created by IgnoreNestedEvents) in IgnoreNestedEvents (created by ForwardRef(IgnoreNestedEvents)) in ForwardRef(IgnoreNestedEvents) (created by HoverArea) in div (created by HoverArea) in div (created by IgnoreNestedEvents) in IgnoreNestedEvents (created by ForwardRef(IgnoreNestedEvents)) in ForwardRef(IgnoreNestedEvents) (created by HoverArea) in HoverArea (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(HoverArea) (created by BlockListBlock) in BlockListBlock in Unknown (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in (BlockListBlock) (created by WithFilters(BlockListBlock)) in WithFilters(BlockListBlock) (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(WithFilters(BlockListBlock)) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(WithFilters(BlockListBlock))) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithViewportMatch(WithSelect(WithDispatch(WithFilters(BlockListBlock)))) (created by Pure(WithViewportMatch(WithSelect(WithDispatch(WithFilters(BlockListBlock)))))) in Pure(WithViewportMatch(WithSelect(WithDispatch(WithFilters(BlockListBlock))))) (created by BlockList) in div (created by BlockList) in BlockList (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(BlockList) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(BlockList)) in Unknown (created by VisualEditor) in div (created by CopyHandler) in CopyHandler (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(CopyHandler) (created by VisualEditor) in div (created by ObserveTyping) in ObserveTyping (created by WithSafeTimeout(ObserveTyping)) in WithSafeTimeout(ObserveTyping) (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(WithSafeTimeout(ObserveTyping)) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(WithSafeTimeout(ObserveTyping))) (created by VisualEditor) in div (created by WritingFlow) in div (created by WritingFlow) in WritingFlow (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(WritingFlow) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(WritingFlow)) (created by VisualEditor) in div (created by BlockSelectionClearer) in BlockSelectionClearer (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(BlockSelectionClearer) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor) in VisualEditor (created by Layout) in div (created by Layout) in div (created by FocusReturnProvider) in FocusReturnProvider (created by Layout) in Layout (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithViewportMatch(Layout) (created by NavigateRegions(WithViewportMatch(Layout))) in div (created by NavigateRegions(WithViewportMatch(Layout))) in NavigateRegions(WithViewportMatch(Layout)) (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(NavigateRegions(WithViewportMatch(Layout))) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Layout)))) (created by Editor) in ErrorBoundary (created by Editor) in div (created by DropZoneProvider) in DropZoneProvider (created by BlockEditorProvider) in SlotFillProvider (created by BlockEditorProvider) in BlockEditorProvider (created by Context.Consumer) in WithRegistry(BlockEditorProvider) (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(WithRegistry(BlockEditorProvider)) (created by EditorProvider) in EditorProvider (created by ComponentWithDispatch) in ComponentWithDispatch (created by Context.Consumer) in WithDispatch(EditorProvider) (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(WithDispatch(EditorProvider)) (created by Editor) in StrictMode (created by Editor) in Editor (created by ComponentWithSelect) in ComponentWithSelect (created by Context.Consumer) in WithSelect(Editor)

It's unclear yet exactly where the fix needs to happen, but the usual cause is passing through spread ...props indiscriminately and leaf native components having camelCase attributes will throw the react warning.

To Reproduce

1. Make sure you are in react development mode (using a dev build of the blocks)
2. Add a Hand-picked Products block to content
3. View the error in the console

Expected behavior

There should be no console warning.

Additional context

This happens against master branch and latest WooCommerce version and WordPress 5.2.2

[issue-label-bot]

Issue-Label Bot is automatically applying the label type: bug to this issue, with a confidence of 0.98. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[nerrad]

Closing, this is actually a bug in Gutenberg that was fixed in this pull: WordPress/gutenberg#14599