diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
index c67f5dcddb..3ee610ddaf 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
@@ -154,13 +154,9 @@ describe('', () => {
lifecycles: new EntityLifecycleFilter(['production']),
});
fireEvent.click(screen.getByTestId('lifecycle-picker-expand'));
- expect(
- screen
- .getByTestId('lifecycle-checkbox-production')
- .querySelector('input[type="checkbox"]'),
- ).toBeChecked();
+ expect(screen.getByLabelText('production')).toBeChecked();
- fireEvent.click(screen.getByTestId('lifecycle-checkbox-label-production'));
+ fireEvent.click(screen.getByLabelText('production'));
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: undefined,
});
diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index b1fba50ae8..dd107b2673 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
@@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model';
import {
Box,
Checkbox,
+ FormControlLabel,
makeStyles,
TextField,
Typography,
@@ -111,15 +112,17 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => {
setSelectedLifecycles(value)
}
renderOption={(option, { selected }) => (
-
-
- {option}
-
+
+ }
+ onClick={event => event.preventDefault()}
+ label={option}
+ />
)}
size="small"
popupIcon={}
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
index 3970942ee1..00d36e5e13 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
@@ -123,10 +123,7 @@ describe('', () => {
);
fireEvent.click(screen.getByTestId('processing-status-picker-expand'));
-
- fireEvent.click(
- screen.getByTestId('processing-status-checkbox-label-Is Orphan'),
- );
+ fireEvent.click(screen.getByText('Is Orphan'));
expect(updateFilters).toHaveBeenCalledWith({
orphan: undefined,
});
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index 237e2d9544..01a6e0188d 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
@@ -18,6 +18,7 @@ import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
import {
Box,
Checkbox,
+ FormControlLabel,
makeStyles,
TextField,
Typography,
@@ -82,14 +83,17 @@ export const EntityProcessingStatusPicker = () => {
errorChange(value.includes('Has Error'));
}}
renderOption={(option, { selected }) => (
-
-
- {option}
-
+
+ }
+ onClick={event => event.preventDefault()}
+ label={option}
+ />
)}
size="small"
popupIcon={