From c275960e7387111c72fa072ff286c775ccaab468 Mon Sep 17 00:00:00 2001
From: Jonathan Roebuck <jroebuck@spotify.com>
Date: Thu, 7 Nov 2024 14:59:36 +0000
Subject: [PATCH] add value to all option to fix a11y issue

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
---
 .../src/components/SearchFilter/SearchFilter.tsx  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
index aba5d97fe2..f5f85f3f56 100644
--- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import React, { ReactElement, ChangeEvent } from 'react';
+import React, { ReactElement, ChangeEvent, useRef } from 'react';
 import { capitalize } from 'lodash';
+import { v4 as uuid } from 'uuid';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -170,18 +171,20 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
     defaultValues,
     valuesDebounceMs,
   );
+  const allOptionValue = useRef(uuid());
+  const allOption = { value: allOptionValue.current, label: 'All' };
   const { filters, setFilters } = useSearch();
 
   const handleChange = (value: SelectedItems) => {
     setFilters(prevFilters => {
       const { [name]: filter, ...others } = prevFilters;
-      return value ? { ...others, [name]: value as string } : others;
+      return value !== allOptionValue.current
+        ? { ...others, [name]: value as string }
+        : others;
     });
   };
 
-  const items = [{ value: '', label: 'All' }].concat(
-    values.map(value => ({ value, label: value })),
-  );
+  const items = [allOption, ...values.map(value => ({ value, label: value }))];
 
   return (
     <FormControl
@@ -193,7 +196,7 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
     >
       <Select
         label={label ?? capitalize(name)}
-        selected={(filters[name] || '') as string}
+        selected={(filters[name] || allOptionValue.current) as string}
         onChange={handleChange}
         items={items}
       />