[fix] select scrollbar (#446)

NewDadaFE · Jan 21, 2019 · ac5dfed · ac5dfed
1 parent 51e43bb
commit ac5dfed
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/packages/react-impression/src/components/Select/Select.js b/packages/react-impression/src/components/Select/Select.js
@@ -124,11 +124,6 @@ export default class Select extends React.PureComponent {
 
   componentDidMount() {
     this.handleInit()
-    window.requestAnimationFrame(() => {
-      this.selectScrollbar = new PerfectScrollbar(this.selectInner, {
-        suppressScrollX: true,
-      })
-    })
   }
 
   /**
@@ -163,10 +158,7 @@ export default class Select extends React.PureComponent {
         option.queryChange('')
       })
       this.selectPopper && this.selectPopper.destroy()
-      if (this.selectInner) {
-        this.selectInner.scrollTop = 0
-        this.handleUpdateSelectScroll()
-      }
+      this.handleDestroySelectScroll()
     })
   }
 
@@ -301,10 +293,6 @@ export default class Select extends React.PureComponent {
         optionGroup.forEach(option => {
           option.queryChange('')
         })
-        if (this.selectInner) {
-          this.selectInner.scrollTop = 0
-          this.handleUpdateSelectScroll()
-        }
         if (this.state.showOption) {
           this.selectPopper = new Popper(this.selectMain, this.selectOption, {
             positionFixed: true,
@@ -313,8 +301,10 @@ export default class Select extends React.PureComponent {
               offset: { offset: '0, 10' },
             },
           })
+          this.handleInitSelectScroll()
         } else {
           this.selectPopper && this.selectPopper.destroy()
+          this.handleDestroySelectScroll()
         }
       }
     )
@@ -351,6 +341,8 @@ export default class Select extends React.PureComponent {
       this.setState({ currentPlaceholder: placeholder })
     }
     this.selectPopper && this.selectPopper.update()
+    this.selectInner.scrollTop = 0
+    this.handleUpdateSelectScroll()
     if (e) e.stopPropagation()
   }
 
@@ -407,10 +399,6 @@ export default class Select extends React.PureComponent {
    */
   componentWillUnmount() {
     System.unmanager(this)
-    if (this.selectScrollbar) {
-      this.selectScrollbar.destroy()
-      this.selectScrollbar = null
-    }
   }
 
   componentWillReceiveProps(props) {
@@ -465,6 +453,20 @@ export default class Select extends React.PureComponent {
     })
   }
 
+  handleInitSelectScroll = () => {
+    window.requestAnimationFrame(() => {
+      this.selectInner.scrollTop = 0
+      this.selectScrollbar = new PerfectScrollbar(this.selectInner, {
+        suppressScrollX: true,
+      })
+    })
+  }
+  handleDestroySelectScroll = () => {
+    if (this.selectScrollbar) {
+      this.selectScrollbar.destroy()
+      this.selectScrollbar = null
+    }
+  }
   handleUpdateSelectScroll = () => {
     window.requestAnimationFrame(() => {
       this.selectScrollbar && this.selectScrollbar.update()