Bootstrap fixes for broken selects and overlapping dropdown (#2216)

* fix broken create options and filter unwanted values in options * fix the overlapping dropdown issue * increase z-Index for InputGroup where it exists with Select * declare new z-index variable in bootstrap-config
ComPlat · Oct 15, 2024 · bb3d98c · bb3d98c
1 parent 9643d5f
commit bb3d98c
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 48 deletions.
diff --git a/app/assets/stylesheets/global-styles/bootstrap-config.scss b/app/assets/stylesheets/global-styles/bootstrap-config.scss
@@ -4,6 +4,16 @@ $info: #5bc0de;
 $warning: #f0ad4e;
 $danger: #d9534f;
 
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+);
+
 @import "bootstrap/functions";
 @import "bootstrap/variables";
 @import "bootstrap/mixins";

diff --git a/app/assets/stylesheets/global-styles/bootstrap-mods.scss b/app/assets/stylesheets/global-styles/bootstrap-mods.scss
@@ -50,3 +50,7 @@
   border-top: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
   border-radius: 0;
 }
+
+.input-group {
+  z-index: 0;
+}
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
@@ -144,7 +144,7 @@ class App extends Component {
     const { showCollectionTree, showGenericWorkflow, propGenericWorkflow } = this.state;
     return (
       <Container fluid className="mydb-app">
-        <Row className="bg-light" style={{ zIndex: 5 }}>
+        <Row className="bg-light z-5">
           <Navigation toggleCollectionTree={this.toggleCollectionTree} />
           <SampleTaskInbox />
         </Row>

diff --git a/...packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js b/...packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
@@ -103,12 +103,13 @@ export default class ReactionDetailsProperties extends Component {
           <Col sm={6}>
             <Form.Group>
               <Form.Label>Solvents (parts)</Form.Label>
-              <InputGroup className="z-0">
+              <InputGroup>
                 <DropdownButton
                   disabled={!permitOn(reaction)}
                   id="solvents_dd"
                   onSelect={this.handleOnSolventSelect}
                   variant="light"
+                  title={reaction.tlc_solvents || ""}
                 >
                   {solventsItems}
                 </DropdownButton>

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
@@ -146,7 +146,7 @@ function GeneralMaterialGroup({
     reagentDd = (
       <Select
         isDisabled={!permitOn(reaction)}
-        className="form-control-sm"
+        className="mb-2"
         options={reagentList}
         placeholder="Reagents"
         onChange={createReagentForReaction}

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -806,7 +806,7 @@ export default class SampleDetails extends React.Component {
     const options = casArr?.map((element) => ({ label: element, value: element }));
     return (
       <div className="my-4">
-        <InputGroup>
+        <InputGroup className="z-4">
           <InputGroup.Text>CAS</InputGroup.Text>
           <CreatableSelect
             name="cas"

diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -245,7 +245,7 @@ export default class SampleForm extends React.Component {
     return (
       <Form.Group>
         <Form.Label>Molecule name</Form.Label>
-        <InputGroup>
+        <InputGroup className="z-4">
           <CreatableSelect
             name="moleculeName"
             isDisabled={!sample.can_update}

diff --git a/app/packs/src/apps/userSettings/Affiliations.js b/app/packs/src/apps/userSettings/Affiliations.js
@@ -35,39 +35,35 @@ function Affiliations({ show, onHide }) {
   useEffect(() => {
     UserSettingsFetcher.getAutoCompleteSuggestions('countries')
       .then((data) => {
-        data.map((item) => {
-          if (!countryOptions.map((option) => option.value).includes(item)) {
-            setCountryOptions((prevItems) => [...prevItems, { value: item, label: item }]);
-          }
-        });
+        setCountryOptions(data.map(item => ({ value: item.value, label: item.label })));
+      })
+      .catch((error) => {
+        console.log(error);
         setInputError({});
       });
 
     UserSettingsFetcher.getAutoCompleteSuggestions('organizations')
       .then((data) => {
-        data.map((item) => {
-          if (!orgOptions.map((option) => option.value).includes(item)) {
-            setOrgOptions((prevItems) => [...prevItems, { value: item, label: item }]);
-          }
-        });
+        setOrgOptions(data.map(item => ({ value: item.value, label: item.label })));
+      })
+      .catch((error) => {
+        console.log(error);
       });
 
     UserSettingsFetcher.getAutoCompleteSuggestions('departments')
       .then((data) => {
-        data.map((item) => {
-          if (!deptOptions.map((option) => option.value).includes(item)) {
-            setDeptOptions((prevItems) => [...prevItems, { value: item, label: item }]);
-          }
-        });
+        setDeptOptions(data.map(item => ({ value: item.value, label: item.label })));
+      })
+      .catch((error) => {
+        console.log(error);
       });
 
     UserSettingsFetcher.getAutoCompleteSuggestions('groups')
       .then((data) => {
-        data.map((item) => {
-          if (!groupOptions.map((option) => option.value).includes(item)) {
-            setGroupOptions((prevItems) => [...prevItems, { value: item, label: item }]);
-          }
-        });
+        setGroupOptions(data.map(item => ({ value: item.value, label: item.label })));
+      })
+      .catch((error) => {
+        console.log(error);
       });
     getAllAffiliations();
   }, []);
@@ -238,14 +234,15 @@ function Affiliations({ show, onHide }) {
                   {item.disabled ? item.country
                     : (
                       <CreatableSelect
-                        isCreatable
                         disabled={item.disabled}
                         placeholder="Select or enter a new option"
-                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
                         options={countryOptions}
-                        value={countryOptions.find((option) => option.value === item.country) || null}
-                        isSearchable
-                        isClearable
+                        onCreateOption={(newValue) => {
+                          const newOption = { value: newValue, label: newValue };
+                          setCountryOptions(prev => [...prev, newOption]);
+                          onChangeHandler(index, 'country', newValue);
+                        }}
+                        value={countryOptions.find(option => option.value === item.country) || null}
                         onChange={(choice) => onChangeHandler(index, 'country', !choice ? '' : choice.value)}
                       />
                     )}
@@ -255,15 +252,16 @@ function Affiliations({ show, onHide }) {
                     : (
                       <>
                         <CreatableSelect
-                          required
-                          components={{ DropdownIndicator: () => null }}
                           disabled={item.disabled}
                           placeholder="Select or enter a new option"
                           className={inputError[index] && inputError[index].organization ? 'is-invalid' : ''}
-                          isCreatable
                           options={orgOptions}
-                          value={orgOptions.find((option) => option.value === item.organization) || null}
-                          isClearable
+                          value={orgOptions.find(option => option.value === item.organization) || null} 
+                          onCreateOption={(newValue) => {
+                            const newOption = { value: newValue, label: newValue };
+                            setOrgOptions(prev => [...prev, newOption]);
+                            onChangeHandler(index, 'organization', newValue);
+                          }}
                           onChange={(choice) => onChangeHandler(index, 'organization', !choice ? '' : choice.value)}
                         />
                         {inputError[index] && inputError[index].organization && (
@@ -276,14 +274,15 @@ function Affiliations({ show, onHide }) {
                   {item.disabled ? item.department
                     : (
                       <CreatableSelect
-                        isCreatable
-                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
                         disabled={item.disabled}
                         placeholder="Select or enter a new option"
                         options={deptOptions}
-                        value={deptOptions.find((option) => option.value === item.department) || null}
-                        isSearchable
-                        clearable
+                        value={deptOptions.find(option => option.value === item.department) || null}
+                        onCreateOption={(newValue) => {
+                          const newOption = { value: newValue, label: newValue };
+                          setDeptOptions(prev => [...prev, newOption]);
+                          onChangeHandler(index, 'department', newValue);
+                        }}
                         onChange={(choice) => onChangeHandler(index, 'department', !choice ? '' : choice.value)}
                       />
                     )}
@@ -292,16 +291,15 @@ function Affiliations({ show, onHide }) {
                   {item.disabled ? item.group
                     : (
                       <CreatableSelect
-                        isCreatable
                         placeholder="Select or enter a new option"
-                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
                         disabled={item.disabled}
-                        allowCreate
+                        value={groupOptions.find(option => option.value === item.group) || null}
                         options={groupOptions}
-                        value={groupOptions.find((option) => option.value === item.group) || null}
-                        isSearchable
-                        closeMenuOnSelect
-                        isClearable
+                        onCreateOption={(newValue) => {
+                          const newOption = { value: newValue, label: newValue };
+                          setGroupOptions(prev => [...prev, newOption]);
+                          onChangeHandler(index, 'group', newValue);
+                        }}
                         onChange={(choice) => onChangeHandler(index, 'group', !choice ? '' : choice.value)}
                       />
                     )}

diff --git a/app/packs/src/fetchers/UserSettingsFetcher.js b/app/packs/src/fetchers/UserSettingsFetcher.js
@@ -5,7 +5,11 @@ export default class UserSettingsFetcher {
     return fetch(
       `/api/v1/public/affiliations/${type}`
     ).then((response) => response.json())
-      .then((data) => data)
+      .then((data) => {
+        return data
+          .filter(item => item && item.trim() !== '')
+          .map(item => ({ value: item, label: item }));
+      })
       .catch((error) => {
         console.log(error);
       });