diff --git a/frontend/src/components/Forms/StatementForm.tsx b/frontend/src/components/Forms/StatementForm.tsx
index 9b054e75..b8b1a5ef 100644
--- a/frontend/src/components/Forms/StatementForm.tsx
+++ b/frontend/src/components/Forms/StatementForm.tsx
@@ -198,7 +198,7 @@ const StatementForm = (props: any) => {
await api.composerViaDestroy(element.children.props.formData.id);
refreshStatement();
}}
- onElementAdd={async (element: any) => {
+ onElementAdd={async () => {
await api.composerViaCreate({
id: -1,
order: statement?.vias?.length,
@@ -354,7 +354,7 @@ const StatementForm = (props: any) => {
},
refreshStatement: () => refreshStatement(),
errors: "",
- mapValueToOption: (anatomicalEntities: any[], formId: any) => {
+ mapValueToOption: (anatomicalEntities: any[]) => {
const entities: Option[] = [];
const selected = findMatchingEntities(
statement,
@@ -386,7 +386,7 @@ const StatementForm = (props: any) => {
);
refreshStatement();
}}
- onElementAdd={async (element: any) => {
+ onElementAdd={async () => {
await api.composerDestinationCreate({
id: -1,
connectivity_statement: statement.id,
@@ -536,7 +536,7 @@ const StatementForm = (props: any) => {
},
refreshStatement: () => refreshStatement(),
errors: "",
- mapValueToOption: (anatomicalEntities: any[], formId: any) => {
+ mapValueToOption: (anatomicalEntities: any[]) => {
const entities: Option[] = [];
const selected = findMatchingEntities(
statement,
@@ -573,6 +573,7 @@ const StatementForm = (props: any) => {
copiedUISchema.forward_connection = {
"ui:widget": CustomEntitiesDropdown,
"ui:options": {
+ chipsNumber: 10,
isDisabled,
placeholder: "Forward connection(s)",
searchPlaceholder: "Search for Connectivity Statements",
diff --git a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx
index 9f5e0f78..e198ef21 100644
--- a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx
+++ b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx
@@ -2,7 +2,6 @@ import {Box, Chip, Tooltip} from "@mui/material";
import {Option} from "../../types";
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
import React from "react";
-
const CustomChipBoxComponent = ({
selectedOptions,
CustomInputChip,
@@ -21,41 +20,47 @@ const CustomChipBoxComponent = ({
width: 'fit-content',
maxWidth: 'fit-content',
}
+
+ const renderChipOrCustomInput = (item: Option) => (
+
+ {CustomInputChip ? (
+
+ ) : (
+ {
+ e.stopPropagation();
+ }}
+ deleteIcon={}
+ onDelete={!isDisabled ? (e) => {
+ e.stopPropagation();
+ handleChipRemove(item);
+ } : undefined}
+ label={item?.label}
+ />
+ )}
+
+ );
+
+
return (
- {selectedOptions?.length ? (
+ {!isDisabled && selectedOptions?.length ? (
selectedOptions
.slice(0, chipsNumber)
- .map((item: Option, index: number) => (
-
- {CustomInputChip ? (
-
- ) : (
- {
- e.stopPropagation();
- }}
- deleteIcon={}
- onDelete={!isDisabled ? (e) => {
- e.stopPropagation();
- handleChipRemove(item);
- } : undefined}
- label={item?.label}
- />
- )}
-
- ))
- ) : null}
+ .map((item: Option) => renderChipOrCustomInput(item))
+ ) : (
+ selectedOptions?.map((item: Option) => renderChipOrCustomInput(item))
+ )}
{!isDisabled && selectedOptions.length > chipsNumber && (
+{selectedOptions.length - chipsNumber}
diff --git a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx
index 429f3d14..04f4f0f1 100644
--- a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx
+++ b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx
@@ -98,7 +98,6 @@ const styles = {
height: "1.5rem",
borderRadius: "0.375rem",
fontSize: "0.875rem",
- maxWidth: "8rem",
fontWeight: 500,
"&.MuiChip-filled": {
@@ -484,7 +483,6 @@ export default function CustomEntitiesDropdown({
gap={1}
sx={{
borderBottom: `0.0625rem solid ${popperBorderColor}`,
- height: autocompleteOptions.length > 0 ? "2.75rem" : "auto",
padding:
autocompleteOptions.length > 0 ? "0 0.875rem" : "0.875rem",
}}