fix: fix picklist still opened after scroll in drawer content area

src/components/Picklist/index.js

@@ -5,6 +5,7 @@ import RenderIf from '../RenderIf';
 import { ESCAPE_KEY, TAB_KEY } from '../../libs/constants';
 import { uniqueId } from '../../libs/utils';
 import OutsideClick from '../../libs/outsideClick';
+import { WindowScrolling } from '../../libs/scrollController';
 import Label from '../Input/label';
 import getNormalizeValue from './helpers/getNormalizeValue';
 import shouldOpenMenu from './helpers/shouldOpenMenu';
@@ -54,6 +55,7 @@ class Picklist extends Component {
         this.handleChange = this.handleChange.bind(this);
         this.closeAndFocusInput = this.closeAndFocusInput.bind(this);
         this.outsideClick = new OutsideClick();
+        this.windowScrolling = new WindowScrolling();
         this.activeChildren = [];
         this.state = {
             isOpen: false,
@@ -69,11 +71,15 @@ class Picklist extends Component {
         const { isOpen } = this.state;
         if (!wasOpen && isOpen) {
             this.outsideClick.startListening(this.containerRef.current, () => this.closeMenu());
+            this.windowScrolling.startListening(() => this.closeMenu());
+        } else if (wasOpen && !isOpen) {
+            this.windowScrolling.stopListening();
         }
     }
 
     componentWillUnmount() {
         this.outsideClick.stopListening();
+        this.windowScrolling.stopListening();
     }
 
     getErrorMessageId() {

src/libs/scrollController/index.js

@@ -239,3 +239,5 @@ export function enableBodyScroll(targetElement) {
         }
     }
 }
+
+export { default as WindowScrolling } from './windowScrolling';

src/libs/scrollController/windowScrolling.js

@@ -0,0 +1,38 @@
+const privateHandleScroll = Symbol('handleScroll');
+
+class WindowScrolling {
+    constructor() {
+        this.callback = null;
+        this.listening = false;
+        this.isTicking = false;
+        this[privateHandleScroll] = this[privateHandleScroll].bind(this);
+    }
+
+    [privateHandleScroll](event) {
+        if (!this.isTicking) {
+            window.requestAnimationFrame(() => {
+                this.callback(this.callback(this, event));
+                this.isTicking = false;
+            });
+            this.isTicking = true;
+        }
+    }
+
+    startListening(callback) {
+        this.callback = callback;
+        window.addEventListener('scroll', this[privateHandleScroll]);
+        window.addEventListener('wheel', this[privateHandleScroll]);
+        this.listening = true;
+    }
+
+    stopListening() {
+        if (this.listening) {
+            this.listening = false;
+            window.removeEventListener('scroll', this[privateHandleScroll]);
+            window.removeEventListener('wheel', this[privateHandleScroll]);
+            this.callback = null;
+        }
+    }
+}
+
+export default WindowScrolling;