Enable hovering state for dropdown

2 files changed, 9 insertions, 7 deletions

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 638b29f88..32105d353 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -32,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Click,
-        closeEvent: DropdownMouseEvent.Click,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -77,8 +77,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                         zIndex={this.props.zDepth}
                     >
                         <div
-                            onMouseEnter={this._onHover.bind(this)}
-                            onMouseLeave={this._onHoverOff.bind(this)}
                             onClick={this._closePopover.bind(this)}
                         >
                             {this.props.popoverContent}
@@ -97,10 +95,13 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({ isHovering: true });
+        this.setState({
+            isHovering: true,
+            anchorEl: event.currentTarget,
+        });
     }
     private _onHoverOff(): void {
-        this.setState({ isHovering: false });
+        this.setState({ isHovering: false, anchorEl: undefined });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
index 66c0ac663..556e8b110 100644
--- a/packages/website/ts/components/ui/popover.tsx
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -20,6 +20,7 @@ const PopoverContainer = styled.div`
     max-height: 679px;
     overflow-y: auto;
     border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
 `;
 
 const defaultPlacement: Placement = 'bottom';
@@ -37,7 +38,7 @@ export class Popover extends React.Component<PopoverProps> {
         };
         return (
             <div>
-                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
+                {/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */}
                 <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>