Fix: Mini Cart block button should be disabled in the editor (#5308)

woocommerce · Dec 7, 2021 · 22c77d3 · 22c77d3
1 parent 986b3ce
commit 22c77d3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/assets/js/base/components/noninteractive/index.tsx b/assets/js/base/components/noninteractive/index.tsx
@@ -34,7 +34,7 @@ const Noninteractive = ( {
 	style = {},
 	...props
 }: {
-	children: React.ReactChildren;
+	children: React.ReactNode;
 	style?: Record< string, string >;
 } ): JSX.Element => {
 	const node = useRef< HTMLDivElement >( null );

diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -18,6 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { positionCenter, positionRight, positionLeft } from '@wordpress/icons';
 import classnames from 'classnames';
 import { isString } from '@woocommerce/types';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -165,22 +166,24 @@ const MiniCartBlock = ( {
 						</PanelBody>
 					) }
 			</InspectorControls>
-			<button
-				className={ classnames(
-					'wc-block-mini-cart__button',
-					colorClassNames
-				) }
-				style={ colorStyle }
-			>
-				<span className="wc-block-mini-cart__amount">
-					{ formatPrice( productTotal ) }
-				</span>
-				<QuantityBadge
-					count={ productCount }
-					colorClassNames={ colorClassNames }
+			<Noninteractive>
+				<button
+					className={ classnames(
+						'wc-block-mini-cart__button',
+						colorClassNames
+					) }
 					style={ colorStyle }
-				/>
-			</button>
+				>
+					<span className="wc-block-mini-cart__amount">
+						{ formatPrice( productTotal ) }
+					</span>
+					<QuantityBadge
+						count={ productCount }
+						colorClassNames={ colorClassNames }
+						style={ colorStyle }
+					/>
+				</button>
+			</Noninteractive>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />
 		</div>
 	);