Merge pull request #681 from senthuran16/fix-operation-scope-autocomp…

…lete-asyncapi Fix operation scope auto complete in Async APIs
wso2 · Apr 3, 2024 · d27fa7b · d27fa7b
2 parents 0519fd6 + d03052d
commit d27fa7b
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/...ts/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx b/...ts/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,16 +123,16 @@ 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({
                                 action: 'scopes',
                                 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) => (