feat(money-input): support menu portaling (#684)

* feat(money-input): support menu portaling

* feat: support menuShouldBlockSroll

Author: montezume

src/components/fields/money-field/README.md

@@ -55,6 +55,9 @@ The amount can have an arbitrary precision. When the precision of the amount exc
 | `hintIcon`              | `node`                                     |    -     | -                       | -       | Icon to be displayed beside the hint text. Will only get rendered when `hint` is passed as well.                                                                                                                                                                      |
 | `description`           | `string` or `node`                         |    -     | -                       | -       | Provides a description for the title.                                                                                                                                                                                                                                 |
 | `hasHighPrecisionBadge` | `bool`                                     |    -     | -                       | -       | Shows high precision badge in case current value uses high precision.                                                                                                                                                                                                 |
+| `menuPortalTarget`      | `HTMLElement`                              |    -     | -                       | -       | Dom element to portal the currency select menu to                                                                                                                                                                                                                     |
+| `menuPortalZIndex`      | `number`                                   |    -     | -                       | -       | z-index value for the currency select menu portal                                                                                                                                                                                                                     |
+| `menuShouldBlockScroll` | `bool`                                     |    -     | -                       | `false` | whether the menu should block scroll while open                                                                                                                                                                                                                       |
 
 The component further forwards all `data-` attributes to the underlying `input` component.
 

src/components/fields/money-field/money-field.js

@@ -59,6 +59,9 @@ class MoneyField extends React.Component {
     isReadOnly: PropTypes.bool,
     isAutofocussed: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
+    menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
+    menuPortalZIndex: PropTypes.number,
+    menuShouldBlockScroll: PropTypes.bool,
 
     // LabelField
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
@@ -117,6 +120,9 @@ class MoneyField extends React.Component {
             onChange={this.props.onChange}
             hasError={hasError}
             hasHighPrecisionBadge={this.props.hasHighPrecisionBadge}
+            menuPortalTarget={this.props.menuPortalTarget}
+            menuPortalZIndex={this.props.menuPortalZIndex}
+            menuShouldBlockScroll={this.props.menuShouldBlockScroll}
             {...filterDataAttributes(this.props)}
           />
           <FieldErrors

src/components/inputs/money-input/README.md

@@ -48,6 +48,9 @@ The amount can have an arbitrary precision. When the precision of the amount exc
 | `hasWarning`            | `bool`                                     |    -     | -                            | -       | Indicates if the input has a warning                                                                                                                          |
 | `horizontalConstraint`  | `string`                                   |    -     | `s`, `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields.                                                                                                                    |
 | `hasHighPrecisionBadge` | `bool`                                     |    -     | -                            | -       | Shows high precision badge in case current value uses high precision.                                                                                         |
+| `menuPortalTarget`      | `HTMLElement`                              |    -     | -                            | -       | Dom element to portal the currency select menu to                                                                                                             |
+| `menuPortalZIndex`      | `number`                                   |    -     | -                            | -       | z-index value for the currency select menu portal                                                                                                             |
+| `menuShouldBlockScroll` | `bool`                                     |    -     | -                            | `false` | whether the menu should block scroll while open                                                                                                               |
 
 ### Static methods
 

src/components/inputs/money-input/money-input.js

@@ -60,8 +60,13 @@ const createCurrencySelectStyles = ({
   isDisabled,
   isReadOnly,
   hasFocus,
+  menuPortalZIndex,
 }) => {
-  const selectStyles = createSelectStyles({ hasWarning, hasError });
+  const selectStyles = createSelectStyles({
+    hasWarning,
+    hasError,
+    menuPortalZIndex,
+  });
   return {
     ...selectStyles,
     control: (base, state) => ({
@@ -389,6 +394,9 @@ class MoneyInput extends React.Component {
     isReadOnly: PropTypes.bool,
     isAutofocussed: PropTypes.bool,
     onChange: requiredIf(PropTypes.func, props => !props.isReadOnly),
+    menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
+    menuPortalZIndex: PropTypes.number.isRequired,
+    menuShouldBlockScroll: PropTypes.bool,
     hasError: PropTypes.bool,
     hasWarning: PropTypes.bool,
     intl: PropTypes.shape({
@@ -402,6 +410,7 @@ class MoneyInput extends React.Component {
   static defaultProps = {
     currencies: [],
     horizontalConstraint: 'scale',
+    menuPortalZIndex: 1,
   };
 
   state = {
@@ -512,6 +521,7 @@ class MoneyInput extends React.Component {
       isDisabled: this.props.isDisabled,
       isReadOnly: this.props.isReadOnly,
       hasFocus,
+      menuPortalZIndex: this.props.menuPortalZIndex,
     });
     const options = this.props.currencies.map(currencyCode => ({
       label: currencyCode,
@@ -603,6 +613,8 @@ class MoneyInput extends React.Component {
                   });
                 this.setState({ currencyHasFocus: true });
               }}
+              menuPortalTarget={this.props.menuPortalTarget}
+              menuShouldBlockScroll={this.props.menuShouldBlockScroll}
               onBlur={() => this.setState({ currencyHasFocus: false })}
               onChange={this.handleCurrencyChange}
               data-testid="currency-dropdown"