fix: bug when clicking the only selected value in filter

packages/design-system/src/MetaFilterSelect.tsx

@@ -90,7 +90,7 @@ const SelectOption: React.FC<
   const {
     isSelected,
     data: { value: optionValue },
-    selectProps: { onChange, value: selectValue },
+    selectProps: { onChange, value: selectValue, disableEmpty },
   } = props;
 
   const clearValue = useCallback(() => {
@@ -118,7 +118,7 @@ const SelectOption: React.FC<
       borderBottomStyle="solid"
       borderBottomColor="borderPurple"
       _hover={{ backgroundColor: 'whiteAlpha.100' }}
-      onClick={isSelected ? clearValue : undefined}
+      onClick={isSelected && !disableEmpty ? clearValue : undefined}
       css={{ div: { cursor: 'pointer' } }}
     >
       <SelectComponents.Option {...props} />

packages/web/components/Quest/QuestFilter.tsx

@@ -121,10 +121,13 @@ export const QuestFilter: React.FC<Props> = ({
           onChange={(value) => {
             const values = value as ValueType[];
             const v = values[values.length - 1];
-            setLimit(v);
-            setQueryVariable('limit', Number(v.value));
+            if (v) {
+              setLimit(v);
+              setQueryVariable('limit', Number(v.value));
+            }
           }}
           options={limitOptions}
+          disableEmpty
         />
         <MetaFilterSelectSearch
           title={`Order: ${order.label}`}
@@ -135,11 +138,13 @@ export const QuestFilter: React.FC<Props> = ({
           onChange={(value) => {
             const values = value as ValueType[];
             const o = values[values.length - 1];
-
-            setOrder(o);
-            setQueryVariable('order', o.value);
+            if (o) {
+              setOrder(o);
+              setQueryVariable('order', o.value);
+            }
           }}
           options={orderOptions}
+          disableEmpty
         />
         <MetaFilterSelectSearch
           title={`Status: ${status.label}`}
@@ -150,11 +155,13 @@ export const QuestFilter: React.FC<Props> = ({
           onChange={(value) => {
             const values = value as ValueType[];
             const s = values[values.length - 1];
-
-            setStatus(s);
-            setQueryVariable('status', s.value);
+            if (s) {
+              setStatus(s);
+              setQueryVariable('status', s.value);
+            }
           }}
           options={statusOptions}
+          disableEmpty
         />
         {aggregates.guilds.length && (
           <MetaFilterSelectSearch
@@ -166,11 +173,13 @@ export const QuestFilter: React.FC<Props> = ({
             onChange={(value) => {
               const values = value as ValueType[];
               const g = values[values.length - 1];
-
-              setGuild(g);
-              setQueryVariable('guild_id', g.value);
+              if (g) {
+                setGuild(g);
+                setQueryVariable('guild_id', g.value);
+              }
             }}
             options={guildOptions}
+            disableEmpty
           />
         )}
 

packages/web/components/Roles.tsx

@@ -23,7 +23,7 @@ export const RolesSelect: React.FC<SetupRolesProps> = ({
     isMulti
     value={roles}
     onChange={(value) => setRoles(value as Array<RoleOption>)}
-    options={roleChoices.map((roleChoice) => ({
+    options={(roleChoices || []).map((roleChoice) => ({
       label: roleChoice.label,
       value: roleChoice.role,
     }))}