From 6ad34254f242e9989876b4097c9eed3d010d5e44 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 19 Aug 2022 16:53:23 +0700
Subject: [PATCH 1/2] style price filter based on wrapper width

---
 .../js/base/components/price-slider/index.tsx | 22 +++++++++++++++----
 .../base/components/price-slider/style.scss   |  4 ++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 372d46927a0..d9f2faa0704 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -8,6 +8,7 @@ import {
 	useCallback,
 	useMemo,
 	useRef,
+	useLayoutEffect,
 } from '@wordpress/element';
 import classnames from 'classnames';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
@@ -97,6 +98,9 @@ const PriceSlider = ( {
 	const [ minPriceInput, setMinPriceInput ] = useState( minPrice );
 	const [ maxPriceInput, setMaxPriceInput ] = useState( maxPrice );
 
+	const wrapper = useRef< HTMLInputElement >( null );
+	const [ wrapperWidth, setWrapperWidth ] = useState( 0 );
+
 	useEffect( () => {
 		setMinPriceInput( minPrice );
 	}, [ minPrice ] );
@@ -105,6 +109,12 @@ const PriceSlider = ( {
 		setMaxPriceInput( maxPrice );
 	}, [ maxPrice ] );
 
+	useLayoutEffect( () => {
+		if ( inlineInput && wrapper.current ) {
+			setWrapperWidth( wrapper.current?.offsetWidth );
+		}
+	}, [ inlineInput, setWrapperWidth ] );
+
 	/**
 	 * Checks if the min and max constraints are valid.
 	 */
@@ -292,7 +302,9 @@ const PriceSlider = ( {
 		showFilterButton &&
 			'wc-block-components-price-slider--has-filter-button',
 		isLoading && 'is-loading',
-		! hasValidConstraints && 'is-disabled'
+		! hasValidConstraints && 'is-disabled',
+		( inlineInput || wrapperWidth <= 300 ) &&
+			'wc-block-components-price-slider--is-input-inline'
 	);
 
 	const activeElement = isObject( minRange.current )
@@ -310,6 +322,8 @@ const PriceSlider = ( {
 		maxPriceInput / 10 ** currency.minorUnit
 	);
 
+	const inlineInputAvailable = inlineInput && wrapperWidth > 300;
+
 	const slider = (
 		<div
 			className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
@@ -370,8 +384,8 @@ const PriceSlider = ( {
 	);
 
 	return (
-		<div className={ classes }>
-			{ ( ! inlineInput || ! showInputFields ) && slider }
+		<div className={ classes } ref={ wrapper }>
+			{ ( ! inlineInputAvailable || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
 					<FormattedMonetaryAmount
@@ -398,7 +412,7 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ minPriceInput }
 					/>
-					{ inlineInput && slider }
+					{ inlineInputAvailable && slider }
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index becb6dd49d0..d610cbd3dda 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -112,6 +112,10 @@
 		max-width: 100px;
 		min-width: 0;
 		padding: $gap-smaller;
+
+		.wc-block-components-price-slider--is-input-inline & {
+			max-width: 60px;
+		}
 	}
 }
 

From 3b792c42f222dc9f854f70a46f1add3ed281290b Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 24 Aug 2022 15:59:35 +0700
Subject: [PATCH 2/2] update E2E test

---
 tests/e2e/specs/shopper/filter-products-by-price.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
index a22a135f2ec..41691406761 100644
--- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -39,7 +39,7 @@ const block = {
 			submitButton: '.wc-block-components-filter-submit-button',
 		},
 	},
-	urlSearchParamWhenFilterIsApplied: '?max_price=1.99',
+	urlSearchParamWhenFilterIsApplied: '?max_price=2',
 	foundProduct: '32GB USB Stick',
 };
 
@@ -56,7 +56,7 @@ const setMaxPrice = async () => {
 	await page.keyboard.down( 'Shift' );
 	await page.keyboard.press( 'Home' );
 	await page.keyboard.up( 'Shift' );
-	await page.keyboard.type( '1.99' );
+	await page.keyboard.type( '2' );
 	await page.keyboard.press( 'Tab' );
 };