OpenConceptLab/ocl_issues#985 | upgrading Autocomplete to use new ren…

…derOption
OpenConceptLab · Oct 20, 2021 · 74887e0 · 74887e0
1 parent 7508aca
commit 74887e0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 18 deletions.
diff --git a/src/components/common/ConceptContainersAutocomplete.jsx b/src/components/common/ConceptContainersAutocomplete.jsx
@@ -21,8 +21,8 @@ const ConceptContainersAutocomplete = ({onChange, items, label, id, required, se
         params => <TextField {...params} required label={label || "Collection/Source"} variant="outlined" fullWidth />
       }
       renderOption={
-        option => (
-          <React.Fragment>
+        (props, option) => (
+          <li {...props} key={option.type + '-' + option.name}>
             <span className='flex-vertical-center'>
               <span style={{marginRight: '5px'}}>
                 {
@@ -33,7 +33,7 @@ const ConceptContainersAutocomplete = ({onChange, items, label, id, required, se
               </span>
               {option.name}
             </span>
-          </React.Fragment>
+          </li>
         )
       }
       onChange={(event, item) => onChange(get(item, 'type') || 'source', item)}

diff --git a/src/components/common/MixedOwnersAutocomplete.jsx b/src/components/common/MixedOwnersAutocomplete.jsx
@@ -91,8 +91,8 @@ const MixedOwnersAutocomplete = ({onChange, label, id, required, minCharactersFo
         )
       }
       renderOption={
-        option => (
-          <React.Fragment>
+        (props, option) => (
+          <li {...props} key={`${option.ownerType}-${option.name}`}>
             <span className='flex-vertical-center'>
               <span style={{marginRight: '5px'}}>
                 {
@@ -103,7 +103,7 @@ const MixedOwnersAutocomplete = ({onChange, label, id, required, minCharactersFo
               </span>
               {option.name}
             </span>
-          </React.Fragment>
+          </li>
         )
       }
     />

diff --git a/src/components/common/ViewConfigForm.jsx b/src/components/common/ViewConfigForm.jsx
@@ -267,8 +267,8 @@ class ViewConfigForm extends React.Component {
               onChange={(event, item) => this.onConfigurationChange(item)}
               clearIcon={false}
               renderOption={
-                option => (
-                  <React.Fragment>
+                (props, option) => (
+                  <li {...props} key={option.name}>
                     <span className='flex-vertical-center'>
                       {
                         option.id === 'new' ?
@@ -283,7 +283,7 @@ class ViewConfigForm extends React.Component {
                       }
 
                     </span>
-                  </React.Fragment>
+                  </li>
                 )
               }
             />

diff --git a/src/components/concepts/HierarchySearch.jsx b/src/components/concepts/HierarchySearch.jsx
@@ -29,18 +29,20 @@ class HierarchySearch extends React.Component {
     return name
   }
 
-  getLabelDom = option => {
+  getLabelDom = (props, option) => {
     const showName = option.display_name && option.display_name !== option.id
     return (
-      <span style={{fontSize: '12px'}}>
-        <span>
-          {
-            showName ?
-            <React.Fragment><b>{option.id}</b>&nbsp;{option.display_name}</React.Fragment> :
-            <React.Fragment>{option.id}</React.Fragment>
-          }
+      <li {...props} key={option.id}>
+        <span style={{fontSize: '12px'}}>
+          <span>
+            {
+              showName ?
+              <React.Fragment><b>{option.id}</b>&nbsp;{option.display_name}</React.Fragment> :
+              <React.Fragment>{option.id}</React.Fragment>
+            }
+          </span>
         </span>
-      </span>
+      </li>
     )
   }