From d06aa13259e2404f7cc6535cf180e4aacf472d94 Mon Sep 17 00:00:00 2001
From: HaneenT <haneen@umich.edu>
Date: Tue, 4 Jun 2024 16:41:49 -0400
Subject: [PATCH] KPMP-5402: update styling for dropdown menus

---
 src/components/ConceptSelect/ConceptSelect.js | 3 ++-
 src/components/DataViz/DataTypeSelector.js    | 2 ++
 src/index.scss                                | 5 +++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ConceptSelect/ConceptSelect.js b/src/components/ConceptSelect/ConceptSelect.js
index a395773e..fc718e8f 100644
--- a/src/components/ConceptSelect/ConceptSelect.js
+++ b/src/components/ConceptSelect/ConceptSelect.js
@@ -124,7 +124,8 @@ class ConceptSelect extends Component {
         if (this.props.smallFormat) {
             customStyles["menu"] = styles => ({
                 ...styles,
-                width: '460px'
+                width: '460px',
+                zIndex: '100'
             })
         }
 
diff --git a/src/components/DataViz/DataTypeSelector.js b/src/components/DataViz/DataTypeSelector.js
index 993a3003..3be0bedc 100644
--- a/src/components/DataViz/DataTypeSelector.js
+++ b/src/components/DataViz/DataTypeSelector.js
@@ -228,6 +228,7 @@ class DataTypeSelector extends Component {
                                 inputValue={this.getInputValue()}
                                 onFocus={() => this.setState({ tissueInputValue: '' })}
                                 className='select d-table-cell w-100 ps-2'
+                                classNamePrefix="select"
                                 isDisabled={this.state.isDatasetSummaryLoading ? true : false}
                             />
                         </Col>
@@ -238,6 +239,7 @@ class DataTypeSelector extends Component {
                                 options={this.state.dataTypeOptions}
                                 onChange={this.handleInputChange.bind(this)}
                                 className='select d-table-cell w-100 ps-2'
+                                classNamePrefix="select"
                                 styles={{ menu: provided => ({ ...provided, zIndex: 999 }) }}
                                 isDisabled={this.state.isDatasetSummaryLoading ? true : false}
                             />
diff --git a/src/index.scss b/src/index.scss
index f1a87175..9c82cf9a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -963,4 +963,9 @@ tr.MuiTableRow-root:nth-child(even) {
   @media (min-width: 992px) {
     margin-right: 15px;
   }
+}
+
+.select__menu {
+  position: relative !important;
+  z-index: 100 !important;
 }
\ No newline at end of file