fixed scrolling while selector is open

dashboard/src/components/Selector.tsx

@@ -21,6 +21,26 @@ export default class Selector extends Component<PropsType, StateType> {
     expanded: false
   }
 
+  wrapperRef: any = React.createRef();
+  parentRef: any = React.createRef();
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside.bind(this));
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside.bind(this));
+  }
+
+  handleClickOutside = (event: any) => {
+    if (
+      (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) &&
+      (this.parentRef && this.parentRef.current && !this.parentRef.current.contains(event.target))
+    ) {
+      this.setState({ expanded: false })
+    }
+  }
+
   handleOptionClick = (option: { value: string, label: string }) => {
     this.props.setActiveValue(option.value);
     this.props.closeOverlay ? null : this.setState({ expanded: false });
@@ -53,17 +73,15 @@ export default class Selector extends Component<PropsType, StateType> {
   renderDropdown = () => {
     if (this.state.expanded) {
       return (
-        <div>
-          {this.props.closeOverlay ? <CloseOverlay onClick={() => this.setState({ expanded: false })} /> : null}
-          <Dropdown
-            dropdownWidth={this.props.dropdownWidth ? this.props.dropdownWidth : this.props.width}
-            dropdownMaxHeight={this.props.dropdownMaxHeight}
-            onClick={() => this.setState({ expanded: false })}
-          >
-            {this.renderDropdownLabel()}
-            {this.renderOptionList()}
-          </Dropdown>
-        </div>
+        <Dropdown
+          ref={this.wrapperRef}
+          dropdownWidth={this.props.dropdownWidth ? this.props.dropdownWidth : this.props.width}
+          dropdownMaxHeight={this.props.dropdownMaxHeight}
+          onClick={() => this.setState({ expanded: false })}
+        >
+          {this.renderDropdownLabel()}
+          {this.renderOptionList()}
+        </Dropdown>
       )
     }
   }
@@ -80,6 +98,7 @@ export default class Selector extends Component<PropsType, StateType> {
     return (
       <StyledSelector width={this.props.width}>
         <MainSelector
+          ref={this.parentRef}
           onClick={() => this.setState({ expanded: !this.state.expanded })}
           expanded={this.state.expanded}
           width={this.props.width}

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -55,22 +55,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           clusters.sort((a: any, b: any) => a.id - b.id);
           if (clusters.length > 0) {
             this.setState({ clusters });
-            let saved = JSON.parse(localStorage.getItem('currentCluster'));
-            if (localStorage.getItem('currentCluster') !== 'null') {
-              setCurrentCluster(clusters[0]);
-              for (let i = 0; i < clusters.length; i++) {
-                if (
-                  clusters[i].id = saved.id &&
-                  clusters[i].project_id === saved.project_id && 
-                  clusters[i].name === saved.name
-                ) {
-                  setCurrentCluster(clusters[i]);
-                  break;
-                }
-              }
-            } else {
-              setCurrentCluster(clusters[0]);
-            }
+            setCurrentCluster(clusters[0]);
           } else if (
             this.props.currentView !== 'provisioner'
             && this.props.currentView !== 'new-project'

dashboard/src/shared/Context.tsx

@@ -37,7 +37,6 @@ class ContextProvider extends Component {
     },
     currentCluster: null as ClusterType | null,
     setCurrentCluster: (currentCluster: ClusterType, callback?: any) => {
-      localStorage.setItem('currentCluster', JSON.stringify(currentCluster));
       this.setState({ currentCluster }, () => {
         callback && callback();
       });