feat: <Dropdown> closeMenuOnScroll prop (#1847)

src/components/Dropdown/Dropdown.jsx

@@ -2,7 +2,7 @@
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import { SIZES } from "../../constants/sizes";
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import Select, { components, createFilter } from "react-select";
 import AsyncSelect from "react-select/async";
 import { noop as NOOP } from "lodash-es";
@@ -17,8 +17,8 @@ import MultiValueContainer from "./components/MultiValueContainer/MultiValueCont
 import {
   ADD_AUTO_HEIGHT_COMPONENTS,
   defaultCustomStyles,
-  DROPDOWN_ID,
   DROPDOWN_CHIP_COLORS,
+  DROPDOWN_ID,
   DROPDOWN_MENU_PLACEMENT,
   DROPDOWN_MENU_POSITION
 } from "./DropdownConstants";
@@ -76,6 +76,7 @@ const Dropdown = forwardRef(
       onClear,
       onInputChange,
       closeMenuOnSelect = !multi,
+      closeMenuOnScroll: customCloseMenuOnScroll,
       withMandatoryDefaultOptions,
       isOptionSelected,
       insideOverflowContainer,
@@ -293,12 +294,12 @@ const Dropdown = forwardRef(
     const closeMenuOnScroll = useCallback(
       event => {
         const scrolledElement = event.target;
-        if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapperFixedPosition)) {
+        if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {
           return false;
         }
-        return insideOverflowContainer || insideOverflowWithTransformContainer;
+        return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;
       },
-      [insideOverflowContainer, insideOverflowWithTransformContainer]
+      [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]
     );
 
     return (
@@ -405,6 +406,7 @@ Dropdown.defaultProps = {
   id: DROPDOWN_ID,
   autoFocus: false,
   closeMenuOnSelect: undefined,
+  closeMenuOnScroll: false,
   ref: undefined,
   withMandatoryDefaultOptions: false,
   insideOverflowContainer: false,
@@ -613,6 +615,11 @@ Dropdown.propTypes = {
    Pass closeMenuOnSelect to close the multi choose any time an options is chosen.
    */
   closeMenuOnSelect: PropTypes.bool,
+  /**
+   * If menu should be closed on scroll - helpful for some tricky use cases
+   * @default false, but true when insideOverflowContainer or insideOverflowWithTransformContainer are true
+   */
+  closeMenuOnScroll: PropTypes.bool,
   /**
    * callback to be called when `multiline` is `true` and the option is removed
    */