Filter Products by Attribute: Fix dropdown search case sensitivity

assets/js/base/components/dropdown-selector/index.js

@@ -31,6 +31,7 @@ import './style.scss';
  * @param {boolean} props.multiple Whether multi-select is allowed.
  * @param {function():any} props.onChange Function to be called when onChange event fires.
  * @param {Array} props.options The option values to show in the select.
+ * @param {boolean} props.isCaseSensitive Whether the dropdown search should be case-sensitive.
  */
 const DropdownSelector = ( {
 	attributeLabel = '',
@@ -43,6 +44,7 @@ const DropdownSelector = ( {
 	multiple = false,
 	onChange = () => {},
 	options = [],
+	isCaseSensitive = false,
 } ) => {
 	const inputRef = useRef( null );
 
@@ -182,11 +184,20 @@ const DropdownSelector = ( {
 							getItemProps={ getItemProps }
 							getMenuProps={ getMenuProps }
 							highlightedIndex={ highlightedIndex }
-							options={ options.filter(
-								( option ) =>
+							options={ options.filter( ( option ) => {
+								if ( isCaseSensitive ) {
+									return (
+										! inputValue ||
+										option.value.includes( inputValue )
+									);
+								}
+								return (
 									! inputValue ||
-									option.value.startsWith( inputValue )
-							) }
+									option.value
+										.toLowerCase()
+										.includes( inputValue.toLowerCase() )
+								);
+							} ) }
 						/>
 					) }
 				</div>
@@ -210,6 +221,7 @@ DropdownSelector.propTypes = {
 			value: PropTypes.string.isRequired,
 		} )
 	),
+	isCaseSensitive: PropTypes.bool,
 };
 
 export default DropdownSelector;