Fix random div blocking screen (#170)

* Fix build warnings

* Fix regression with random div blocking screen

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 7.0.18
+### Fixed
+- Fixed dropdown container floating around blocking user interaction.
+
 ## 7.0.17
 ### Changed
 - Use optional chaining when accessing `attr`

lib/components/Balloon/Balloon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames/bind';
-import {DivProps, SpanProps, mergeAttributes, Elements as Attr} from '../../Attributes';
+import {SpanProps, mergeAttributes, Elements as Attr} from '../../Attributes';
 import {Dropdown, DropdownPosition, DropdownAlignment} from '../Dropdown';
 import {MethodNode} from '../../Common';
 const css = classNames.bind(require('./Balloon.module.scss'));

lib/components/DateTime/DatePicker.tsx

@@ -116,7 +116,6 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
      * if the pasted string is malformed to give the user a chance to correct it
      */
     private paste: boolean;
-    private input: HTMLInputElement;
     private _containerRef: HTMLElement;
 
     oldSetState: any;
@@ -273,8 +272,6 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         return { year, month, date, valid };
     }
 
-    inputRef = (element: HTMLInputElement) => this.input = element;
-
     onChange = (event) => {
         let newValue: string = event.target.value;
         if (newValue === '') {
@@ -412,7 +409,6 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                         onPaste={this.onPaste}
                         required={this.props.required}
                         disabled={this.props.disabled}
-                        methodRef={this.inputRef}
                         attr={this.props.attr?.input}
                     />
                     <ActionTriggerButton

lib/components/DateTime/TimeInput.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames/bind';
 import {DivProps, OptionProps, SelectProps, Elements as Attr} from '../../Attributes';
-import {FormOption} from '../../Common';
 const css = classNames.bind(require('./TimeInput.module.scss'));
 
 export interface TimeInputType {}

lib/components/Dropdown/Dropdown.module.scss

@@ -148,11 +148,6 @@ $arrow-size: 2*$grid-size;
 .dropdown-host {
     position: relative;
     overflow: hidden;
-
-    :global(.md-dropdown-container) {
-        visibility: hidden;
-        pointer-events: none;
-    }
 
     :global(.md-dropdown) {
         position: absolute;
@@ -161,12 +156,15 @@ $arrow-size: 2*$grid-size;
 }
 
 :global(.md-dropdown-container) {
-    visibility: visible;
     position: fixed;
     z-index: $fixed-dropdown-z-index;
 
     :global(.md-dropdown) {
         visibility: visible;
-        pointer-events: auto;
+        pointer-events: none;
+
+        &.interactive {
+            pointer-events: auto;
+        }
     }
 }

lib/components/Dropdown/Dropdown.tsx

@@ -26,20 +26,7 @@ export enum DropdownAlignment {
 export interface DropdownAttributes {
     host?: SpanProps;
     dropdown?: SpanProps;
-}
-
-interface ScrollOffset {
-    top: number;
-    left: number;
-}
-
-interface DropdownOffset {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    height: number;
-    width: number;
+    dropdownContainer?: DivProps;
 }
 
 export interface DropdownProps {
@@ -97,7 +84,7 @@ export interface DropdownProps {
 export const Dropdown = React.memo(({ className, onMouseEnter, onMouseLeave, attr, dropdown, children, visible, outerEvents, onOuterEvent, positionHint, alignmentHint, showArrow, dropdownSeparation }: DropdownProps) => {
     const dropdownRef = React.useRef<HTMLSpanElement>();
     const hostRef = React.useRef<HTMLSpanElement>();
-    const containerRef = React.useRef<HTMLDivElement>(document.querySelector('#md-dropdown-container'));
+    const containerRef = React.useRef<HTMLDivElement>();
 
     const eventsConnected = React.useRef<boolean>(false);
 
@@ -356,6 +343,14 @@ export const Dropdown = React.memo(({ className, onMouseEnter, onMouseLeave, att
                 </Attr.span>
                 {children}
             </Attr.span>
+            {visible && ReactDOM.createPortal(
+                <Attr.div
+                    className={css('md-dropdown-container', { interactive })}
+                    methodRef={containerRef}
+                    attr={attr?.dropdownContainer}>
+                </Attr.div>,
+                document.querySelector('#popup-container')
+            )}
         </>
     );
 });

lib/components/Field/FormLabel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames/bind';
-import {DivProps, LabelProps, mergeAttributeObjects, Elements as Attr} from '../../Attributes';
+import {DivProps, LabelProps, Elements as Attr} from '../../Attributes';
 import {MethodNode} from '../../Common';
 import {Icon, IconSize, IconAttributes} from '../Icon';
 import {Balloon, BalloonAttributes} from '../Balloon';

lib/components/Masthead/Masthead.tsx

@@ -5,7 +5,7 @@ import styled, { ThemeProvider, ThemeProps} from 'styled-components';
 import { MethodNode } from '../../Common';
 import * as InlinePopup from '../InlinePopup';
 import { NavigationProperties } from '../Navigation/Navigation';
-import { ActionTriggerButton, ActionTriggerAttributes, ActionTriggerButtonAttributes } from '../ActionTrigger';
+import { ActionTriggerAttributes, ActionTriggerButtonAttributes } from '../ActionTrigger';
 import { Elements as Attr } from '../../Attributes';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { TextInputAttributes } from '../Input/TextInput';

lib/components/Shell/Shell.tsx

@@ -76,10 +76,10 @@ export function Shell({ theme, masthead, navigation, children, onClick }: ShellP
                     </div>
                 </div>
                 <div 
-                    id='md-dropdown-container'
+                    id='popup-container'
                     aria-live='polite'
                     aria-atomic='true'
-                    className={css('md-dropdown-container')}
+                    className={css('popup-container')}
                 />
             </>
         </ThemeProvider>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.17",
+    "version": "7.0.18",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",