Skip to content

Commit a8c132b

Browse files
montezumemontezume
authored
feat: support menuPortalTarget prop for select-inputs and fields (#682)
* feat: make portal zindex configurable
1 parent da3692b commit a8c132b

File tree

17 files changed

+59
-1
lines changed

17 files changed

+59
-1
lines changed

‎src/components/fields/async-creatable-select-field/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import { AsyncCreatableSelectField } from '@commercetools-frontend/ui-kit';
4444
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4545
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |
4646
| `maxMenuHeight` | `number` | - | - | - | Maximum height of the menu before scrolling |
47+
| `menuPortalTarget` | `HTMLElement` | - | - | - | Dom element to portal the select menu to |
48+
| `menuPortalZIndex` | `number` | - | - | - | z-index value for the menu portal |
4749
| `name` | `string` | - | - | - | Name of the HTML Input (optional - without this, no input will be rendered) |
4850
| `noOptionsMessage` | `func` | - | - | - | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present. |
4951
| `onBlur` | `func` | - | - | - | Handle blur events on the control |

‎src/components/fields/async-creatable-select-field/async-creatable-select-field.js

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default class SelectField extends React.Component {
4545
isMulti: PropTypes.bool,
4646
isSearchable: PropTypes.bool,
4747
maxMenuHeight: PropTypes.number,
48+
menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
49+
menuPortalZIndex: PropTypes.number,
4850
name: PropTypes.string,
4951
noOptionsMessage: PropTypes.func,
5052
onBlur: PropTypes.func,
@@ -155,6 +157,8 @@ export default class SelectField extends React.Component {
155157
isMulti={this.props.isMulti}
156158
isSearchable={this.props.isSearchable}
157159
maxMenuHeight={this.props.maxMenuHeight}
160+
menuPortalTarget={this.props.menuPortalTarget}
161+
menuPortalZIndex={this.props.menuPortalZIndex}
158162
name={this.props.name}
159163
noOptionsMessage={this.props.noOptionsMessage}
160164
onBlur={this.props.onBlur}

‎src/components/fields/async-select-field/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ import { AsyncSelectField } from '@commercetools-frontend/ui-kit';
4040
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4141
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |
4242
| `maxMenuHeight` | `number` | - | - | - | Maximum height of the menu before scrolling |
43+
| `menuPortalTarget` | `HTMLElement` | - | - | - | Dom element to portal the select menu to |
44+
| `menuPortalZIndex` | `number` | - | - | - | z-index value for the menu portal |
4345
| `name` | `string` | - | - | - | Name of the HTML Input (optional - without this, no input will be rendered) |
4446
| `noOptionsMessage` | `func` | - | - | - | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present. |
4547
| `onBlur` | `func` | - | - | - | Handle blur events on the control |

‎src/components/fields/async-select-field/async-select-field.js

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default class AsyncSelectField extends React.Component {
4545
isMulti: PropTypes.bool,
4646
isSearchable: PropTypes.bool,
4747
maxMenuHeight: PropTypes.number,
48+
menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
49+
menuPortalZIndex: PropTypes.number,
4850
name: PropTypes.string,
4951
noOptionsMessage: PropTypes.func,
5052
onBlur: PropTypes.func,
@@ -136,6 +138,8 @@ export default class AsyncSelectField extends React.Component {
136138
isMulti={this.props.isMulti}
137139
isSearchable={this.props.isSearchable}
138140
maxMenuHeight={this.props.maxMenuHeight}
141+
menuPortalTarget={this.props.menuPortalTarget}
142+
menuPortalZIndex={this.props.menuPortalZIndex}
139143
name={this.props.name}
140144
noOptionsMessage={this.props.noOptionsMessage}
141145
onBlur={this.props.onBlur}

‎src/components/fields/creatable-select-field/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ import { CreatableSelectField } from '@commercetools-frontend/ui-kit';
4343
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4444
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |
4545
| `maxMenuHeight` | `number` | - | - | - | Maximum height of the menu before scrolling |
46+
| `menuPortalTarget` | `HTMLElement` | - | - | - | Dom element to portal the select menu to |
47+
| `menuPortalZIndex` | `number` | - | - | - | z-index value for the menu portal |
4648
| `name` | `string` | - | - | - | Name of the HTML Input (optional - without this, no input will be rendered) |
4749
| `noOptionsMessage` | `func` | - | - | - | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present. |
4850
| `onBlur` | `func` | - | - | - | Handle blur events on the control |

‎src/components/fields/creatable-select-field/creatable-select-field.js

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default class SelectField extends React.Component {
4545
isMulti: PropTypes.bool,
4646
isSearchable: PropTypes.bool,
4747
maxMenuHeight: PropTypes.number,
48+
menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
49+
menuPortalZIndex: PropTypes.number,
4850
name: PropTypes.string,
4951
noOptionsMessage: PropTypes.func,
5052
onBlur: PropTypes.func,
@@ -143,6 +145,8 @@ export default class SelectField extends React.Component {
143145
isMulti={this.props.isMulti}
144146
isSearchable={this.props.isSearchable}
145147
maxMenuHeight={this.props.maxMenuHeight}
148+
menuPortalTarget={this.props.menuPortalTarget}
149+
menuPortalZIndex={this.props.menuPortalZIndex}
146150
name={this.props.name}
147151
noOptionsMessage={this.props.noOptionsMessage}
148152
onBlur={this.props.onBlur}

‎src/components/fields/select-field/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ import { SelectField } from '@commercetools-frontend/ui-kit';
4343
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
4444
| `isSearchable` | `bool` | - | - | - | Whether to enable search functionality |
4545
| `maxMenuHeight` | `number` | - | - | - | Maximum height of the menu before scrolling |
46+
| `menuPortalTarget` | `HTMLElement` | - | - | - | Dom element to portal the select menu to |
47+
| `menuPortalZIndex` | `number` | - | - | - | z-index value for the menu portal |
4648
| `name` | `string` | - | - | - | Name of the HTML Input (optional - without this, no input will be rendered) |
4749
| `noOptionsMessage` | `func` | - | - | - | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present. |
4850
| `onBlur` | `func` | - | - | - | Handle blur events on the control |

‎src/components/fields/select-field/select-field.js

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default class SelectField extends React.Component {
4545
isMulti: PropTypes.bool,
4646
isSearchable: PropTypes.bool,
4747
maxMenuHeight: PropTypes.number,
48+
menuPortalTarget: PropTypes.instanceOf(PropTypes.element),
49+
menuPortalZIndex: PropTypes.number,
4850
name: PropTypes.string,
4951
noOptionsMessage: PropTypes.func,
5052
onBlur: PropTypes.func,
@@ -129,6 +131,8 @@ export default class SelectField extends React.Component {
129131
isMulti={this.props.isMulti}
130132
isSearchable={this.props.isSearchable}
131133
maxMenuHeight={this.props.maxMenuHeight}
134+
menuPortalTarget={this.props.menuPortalTarget}
135+
menuPortalZIndex={this.props.menuPortalZIndex}
132136
name={this.props.name}
133137
noOptionsMessage={this.props.noOptionsMessage}
134138
onBlur={this.props.onBlur}

‎src/components/inputs/async-creatable-select-input/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ Any parent component using `AsyncCreatableSelectInput` has to pass in a value, w
6767
| `isMulti` | `bool` | - | - | - | Support multiple selected options |
6868
| `isSearchable` | `bool` | - | - | `true` | Whether to enable search functionality |
6969
| `maxMenuHeight` | `number` | - | - | - | Maximum height of the menu before scrolling |
70+
| `menuPortalTarget` | `HTMLElement` | - | - | - | Dom element to portal the select menu to |
71+
| `menuPortalZIndex` | `number` | - | - | - | z-index value for the menu portal |
7072
| `name` | `string` | - | - | - | Name of the HTML Input (optional - without this, no input will be rendered) |
7173
| `noOptionsMessage` | `func` | - | - | - | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present. |
7274
| `onBlur` | `func` | - | - | - | Handle blur events on the control |

0 commit comments

Comments
 (0)