From d03052d4950304df96343fc79ee81e163c90fc55 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Wed, 3 Apr 2024 14:30:39 +0530
Subject: [PATCH] Fix operation scope auto complete in Async APIs

---
 .../asyncapi/OperationGovernance.jsx                   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx
index 35c73b39486..e8a3bbe8560 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete from '@mui/lab/Autocomplete';
+import Autocomplete from '@mui/material/Autocomplete';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import Grid from '@mui/material/Grid';
@@ -123,7 +123,7 @@ export default function OperationGovernance(props) {
                         disableCloseOnSelect
                         value={operationScopes.map((scope) => ({ scope: { name: scope } }))}
                         getOptionLabel={(option) => option.scope.name}
-                        getOptionSelected={(option, value) => option.scope.name === value.scope.name}
+                        isOptionEqualToValue={(option, value) => option.scope.name === value.scope.name}
                         onChange={(event, newValue) => {
                             const selectedScopes = newValue.map((val) => val.scope.name);
                             operationsDispatcher({
@@ -131,8 +131,8 @@ export default function OperationGovernance(props) {
                                 data: { target, verb, value: selectedScopes ? [selectedScopes] : [] },
                             });
                         }}
-                        renderOption={(option, { selected }) => (
-                            <>
+                        renderOption={(listOfOptions, option, { selected }) => (
+                            <li {...listOfOptions}>
                                 <Checkbox
                                     id={verb + target + '-operation-scope-' + option.scope.name}
                                     icon={icon}
@@ -141,7 +141,7 @@ export default function OperationGovernance(props) {
                                     checked={selected}
                                 />
                                 {option.scope.name}
-                            </>
+                            </li>
                         )}
                         style={{ width: 500 }}
                         renderInput={(params) => (