add scrollbar to dropdown

src/components/Devices.js

@@ -4,11 +4,32 @@ import * as _ from 'lodash';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
+import Select from 'react-select';
 
 import DeviceGraph from "./DeviceGraph";
 import db from '../firebase';
 import './Devices.css';
 
+const styles = {
+    menuList: (base) => ({
+        ...base,
+
+        "::-webkit-scrollbar": {
+            width: "4px",
+            height: "0px",
+        },
+        "::-webkit-scrollbar-track": {
+            background: "#f1f1f1"
+        },
+        "::-webkit-scrollbar-thumb": {
+            background: "#888"
+        },
+        "::-webkit-scrollbar-thumb:hover": {
+            background: "#555"
+        }
+    })
+};
+
 const Devices = () => {
     const [device, setDevice] = useState("Select a device");
     const [testDate, setTestDate] = useState("Select a test date");
@@ -55,6 +76,8 @@ const Devices = () => {
         setShowGraph(true);
     }
 
+    const menuPortalTarget = document.getElementById('root');
+
     useEffect(() => {
         if (!allTests) {
             const q = query(collection(db, "testData"));
@@ -86,6 +109,11 @@ const Devices = () => {
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
                 <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
+                
+                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
+                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+
                 <button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
             </div>