Merge pull request #468 from python-discord/fix-dropdown-overlap

Fix Dropdown Overlap Bug

2 files changed, 23 insertions, 10 deletions

diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 2d0187a..16049a8 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -11,8 +11,12 @@ interface SelectProps {
 }
 
 const containerStyles = css`
+  display: flex;
   position: relative;
   width: min(20rem, 90%);
+  
+  flex-direction: column;
+  border-bottom: 0;
 
   color: black;
   cursor: pointer;
@@ -84,7 +88,6 @@ const arrowStyles = css`
 
 const optionContainerStyles = css`
   .option_container {
-    position: absolute;
     width: 100%;
     height: 0;
 
@@ -100,16 +103,22 @@ const optionContainerStyles = css`
     border: 0.1rem solid black;
     border-radius: 0 0 8px 8px;
     border-top: none;
+    outline: none;
 
     transition: opacity 200ms, visibility 200ms;
 
     * {
       cursor: pointer;
     }
+    
+    .scrollbar-container {
+      height: 150px;
+      overflow-y: scroll;
+    }
   }
 
   :focus-within .option_container {
-    height: auto;
+    height: 100%;
     visibility: visible;
     opacity: 1;
   }
@@ -198,13 +207,15 @@ class Select extends React.Component<SelectProps> {
                     <div tabIndex={0} className="selected_option" ref={selected_option_ref} onMouseDown={handle_click} onKeyDown={handle_click}>...</div>
                 </div>
 
-                <div className="option_container" tabIndex={-1} css={css`outline: none;`}>
-                    { this.props.options.map((option, index) => (
-                        <div key={index} css={optionStyles}>
-                            <input type="checkbox" css={[hiddenInput, inputStyles]} onChange={event => this.handler.call(this, selected_option_ref, event)}/>
-                            <div>{option}</div>
-                        </div>
-                    )) }
+                <div className="option_container" tabIndex={-1}>
+                    <div className="scrollbar-container">
+                        { this.props.options.map((option, index) => (
+                            <div key={index} css={optionStyles}>
+                                <input type="checkbox" css={[hiddenInput, inputStyles]} onChange={event => this.handler.call(this, selected_option_ref, event)}/>
+                                <div>{option}</div>
+                            </div>
+                        )) }
+                    </div>
                 </div>
             </div>
         );
diff --git a/webpack.config.js b/webpack.config.js
index 3747a07..06fcf21 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require("path")
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CopyPlugin = require('copy-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 const webpack = require("webpack")
 if (process.env.NODE_ENV === "development") { require("dotenv").config(); }
 
@@ -96,5 +96,7 @@ module.exports = {
     }), new HtmlWebpackPlugin({
         inject: true,
         template: 'public/index.html'
+    }), new webpack.SourceMapDevToolPlugin({
+        filename: "[file].map[query]"
     })]
 }