bug: a filter with a single option which is selected should not be hi…

…dden (#840)

Co-authored-by: Wesley Walser <[email protected]>

.changeset/tiny-vans-serve.md

@@ -0,0 +1,5 @@
+---
+'@sajari/react-search-ui': patch
+---
+
+bug: a filter with a single option which is selected should not be hidden

packages/search-ui/src/Filter/ColorFilter.tsx

@@ -29,7 +29,14 @@ const ColorFilter = ({ name, title, ...rest }: Omit<ColorFilterProps, 'type'>) =
     [JSON.stringify(filtered)],
   );
 
-  if ((isEmpty(filtered) && isEmpty(selected)) || filtered.length === 1) {
+  if (isEmpty(filtered) && isEmpty(selected)) {
+    return null;
+  }
+
+  // We want to hide filters which only contain a single option
+  // But many queries only return relevant aggregate filters which have counts.
+  // If a filter is selected, it can be the only aggregate with a count
+  if (filtered.length === 1 && isEmpty(selected)) {
     return null;
   }
 

packages/search-ui/src/Filter/ListFilter.tsx

@@ -151,7 +151,14 @@ const ListFilter = (props: Omit<ListFilterProps, 'type'>) => {
     setQuery(value || '');
   }, []);
 
-  if ((isEmpty(options) && isEmpty(selected)) || options.length === 1) {
+  if (isEmpty(options) && isEmpty(selected)) {
+    return null;
+  }
+
+  // We want to hide filters which only contain a single option
+  // But many queries only return relevant aggregate filters which have counts.
+  // If a filter is selected, it can be the only aggregate with a count
+  if (options.length === 1 && isEmpty(selected)) {
     return null;
   }
 

packages/search-ui/src/Filter/SelectFilter.tsx

@@ -37,6 +37,13 @@ const SelectFilter = (props: Omit<SelectFilterProps, 'type'>) => {
     return null;
   }
 
+  // We want to hide filters which only contain a single option
+  // But many queries only return relevant aggregate filters which have counts.
+  // If a filter is selected, it can be the only aggregate with a count
+  if (options.length === 1 && isEmpty(selected)) {
+    return null;
+  }
+
   const getSelectText = (labels: Array<string | number>) => {
     if (!labels.length) {
       return t('select');

packages/search-ui/src/Filter/TabFilter.tsx

@@ -32,7 +32,14 @@ const TabFilter = (props: Omit<TabFilterProps, 'type'>) => {
   const sliced = limit && options.length > limit ? options.slice(0, limit) : options;
   const { disableDefaultStyles = false, customClassNames, currency, language } = useSearchUIContext();
 
-  if (isEmpty(sliced) || sliced.length === 1) {
+  if (isEmpty(sliced)) {
+    return null;
+  }
+
+  // We want to hide filters which only contain a single option
+  // But many queries only return relevant aggregate filters which have counts.
+  // If a filter is selected, it can be the only aggregate with a count
+  if (sliced.length === 1 && isEmpty(selected)) {
     return null;
   }