testing drop-down options

Author: kchender

app/src/components/main/AddLink.tsx

@@ -5,7 +5,7 @@ import FormControl from '@material-ui/core/FormControl';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { InputLabel } from '@material-ui/core';
-
+import { TextField } from '@material-ui/core';
 import { styleContext } from '../../containers/AppContainer';
 
 function AddLink({ id, onClickHandler }) {
@@ -37,18 +37,31 @@ function AddLink({ id, onClickHandler }) {
   }
 
   const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
-  const dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
+  const dropDown = [<MenuItem style={{ color: isThemeLight? '#000' : '#fff'}} disabled /*hidden selected*/>Pages</MenuItem>].concat(pagesItems.map(comp => <MenuItem style={{ color: isThemeLight? '#000' : '#fff'}} value={comp.name}>{comp.name}</MenuItem>));
 
   return (
-    <div style={{padding: '1px', float: 'right', display: 'flex', border: '2px solid red', alignSelf: 'center'}}>
-      <FormControl size='medium' style={{display: 'flex'}}>
-          <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
-          <Select label='pages'
+    <div style={{padding: '1px', float: 'right', display: 'flex' }}>
+      <FormControl size='medium' style={ {color: '#008000'/*{display: 'flex', alignItems: 'stretch'}*/} }>
+      <InputLabel id='page-select-label' style={ { color:' #008000'} }>Pages</InputLabel>
+          <Select 
+            // MenuProps={{
+            //   anchorOrigin: {
+            //     vertical: "bottom",
+            //     horizontal: "left"
+            //   },
+            //   transformOrigin: {
+            //     vertical: "top",
+            //     horizontal: "left"
+            //   },
+            //   getContentAnchorEl: null
+            // }}
+            label='Pages'
+            labelId='page-select-label'
             variant="outlined"
             onMouseDown={onClickHandler}
             onChange={handlePageSelect}
             id="page-select"
-            style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
+            style={ isThemeLight? {/*backgroundColor: '#eef0f1',*/ color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
             >
             {dropDown}
           </Select>