diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
index 74b9dadda3..2839ce1731 100644
--- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
@@ -407,6 +407,38 @@ describe('', () => {
});
});
+ describe('ui:disabled MultiEntityPicker', () => {
+ beforeEach(() => {
+ uiSchema = {
+ 'ui:options': {
+ allowArbitraryValues: true,
+ },
+ 'ui:disabled': true,
+ };
+ props = {
+ onChange,
+ schema,
+ required: true,
+ uiSchema,
+ rawErrors,
+ formData,
+ } as unknown as FieldProps;
+
+ catalogApi.getEntities.mockResolvedValue({ items: entities });
+ });
+ it('Prevents user from modifying input when ui:disabled is true', async () => {
+ props.formData = ['component/default:myentity'];
+ await renderInTestApp(
+
+
+ ,
+ );
+
+ const input = screen.getByRole('textbox');
+ expect(input).toBeDisabled();
+ });
+ });
+
describe('Optional MultiEntityPicker', () => {
beforeEach(() => {
uiSchema = {
diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
index bf2bb34ab6..bcc2e6e773 100644
--- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
@@ -61,10 +61,12 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
formData,
idSchema,
} = props;
+
const catalogFilter = buildCatalogFilter(uiSchema);
const defaultKind = uiSchema['ui:options']?.defaultKind;
const defaultNamespace =
uiSchema['ui:options']?.defaultNamespace || undefined;
+ const isDisabled = uiSchema?.['ui:disabled'] ?? false;
const [noOfItemsSelected, setNoOfItemsSelected] = useState(0);
const catalogApi = useApi(catalogApiRef);
@@ -151,7 +153,10 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
multiple
filterSelectedOptions
disabled={
- required && !allowArbitraryValues && entities?.entities?.length === 1
+ isDisabled ||
+ (required &&
+ !allowArbitraryValues &&
+ entities?.entities?.length === 1)
}
id={idSchema?.$id}
defaultValue={formData}
@@ -175,6 +180,7 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {