catalog: make text of picker clickable

Signed-off-by: Frederic Kayser <frederic@frederic-kayser.de>

.changeset/forty-days-tell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed bug in catalog filters where you could not click on the text to select a value.

plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx

@@ -18,7 +18,6 @@ import { Entity } from '@backstage/catalog-model';
 import {
   Box,
   Checkbox,
-  FormControlLabel,
   makeStyles,
   TextField,
   Typography,
@@ -112,16 +111,14 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => {
             setSelectedLifecycles(value)
           }
           renderOption={(option, { selected }) => (
-            <FormControlLabel
-              control={
-                <Checkbox
-                  icon={icon}
-                  checkedIcon={checkedIcon}
-                  checked={selected}
-                />
-              }
-              label={option}
-            />
+            <div>
+              <Checkbox
+                icon={icon}
+                checkedIcon={checkedIcon}
+                checked={selected}
+              />
+              {option}
+            </div>
           )}
           size="small"
           popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}

plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx

@@ -18,7 +18,6 @@ import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
 import {
   Box,
   Checkbox,
-  FormControlLabel,
   makeStyles,
   TextField,
   Typography,
@@ -83,16 +82,14 @@ export const EntityProcessingStatusPicker = () => {
             errorChange(value.includes('Has Error'));
           }}
           renderOption={(option, { selected }) => (
-            <FormControlLabel
-              control={
-                <Checkbox
-                  icon={icon}
-                  checkedIcon={checkedIcon}
-                  checked={selected}
-                />
-              }
-              label={option}
-            />
+            <div>
+              <Checkbox
+                icon={icon}
+                checkedIcon={checkedIcon}
+                checked={selected}
+              />
+              {option}
+            </div>
           )}
           size="small"
           popupIcon={