Skip to content

Combobox: Allow PopperJS to position menu correctly #1454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 13, 2018
Merged

Combobox: Allow PopperJS to position menu correctly #1454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions components/combobox/__tests__/__snapshots__/combobox.snapshot-test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ exports[`Base Custom Menu Item Open DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-listbox__item"
Expand Down Expand Up @@ -490,6 +497,13 @@ exports[`Base Open Custom Class Name DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid this-is-the-menu"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-dropdown__header slds-truncate"
Expand Down Expand Up @@ -690,6 +704,13 @@ exports[`Base Open DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-listbox__item"
Expand Down Expand Up @@ -881,6 +902,7 @@ exports[`Base Open Menu Inherit Width Of Menu DOM Snapshot 1`] = `
style={
Object {
"maxWidth": "500px",
"position": undefined,
"width": "auto",
}
}
Expand Down Expand Up @@ -1013,6 +1035,13 @@ exports[`Base Open Menu Sub Header DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-dropdown__header slds-truncate"
Expand Down Expand Up @@ -2144,6 +2173,13 @@ exports[`Readonly Single Selection Custom Menu Item Open DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_length-with-icon-5"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-listbox__item"
Expand Down Expand Up @@ -3011,6 +3047,13 @@ exports[`Readonly Single Selection Selected Open DOM Snapshot 1`] = `
<ul
className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_length-with-icon-5"
role="presentation"
style={
Object {
"maxWidth": undefined,
"position": undefined,
"width": undefined,
}
}
>
<li
className="slds-listbox__item"
Expand Down
1 change: 1 addition & 0 deletions components/combobox/combobox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1040,6 +1040,7 @@ class Combobox extends React.Component {
}
labels={labels}
menuItem={this.props.menuItem}
menuPosition={this.props.menuPosition}
maxWidth={this.props.menuMaxWidth}
options={this.props.options}
onSelect={this.handleSelect}
Expand Down
20 changes: 12 additions & 8 deletions components/combobox/private/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,13 @@ const propTypes = {
const defaultProps = {};

const Menu = (props) => {
const style =
props.inheritWidthOf === 'menu'
? {
width: 'auto',
maxWidth: props.maxWidth ? props.maxWidth : 'inherit',
}
: undefined;
let maxWidth = props.inheritWidthOf === 'menu' ? 'inherit' : undefined;
maxWidth =
props.inheritWidthOf === 'menu' && props.maxWidth
? props.maxWidth
: maxWidth;

// .slds-dropdown sets the menu to absolute positioning, since it has a relative parent. Absolute positioning removes clientHeight and clientWidth which Popper.js needs to absolute position the menu's wrapping div. Absolute positioning an already absolute positioned element doesn't work. Setting the menu's position to relative allows PopperJS to work it's magic.
const menuOptions = props.options.map((optionData, index) => {
const active =
index === props.activeOptionIndex &&
Expand Down Expand Up @@ -259,7 +259,11 @@ const Menu = (props) => {
props.classNameMenu
)}
role="presentation"
style={style}
style={{
width: props.inheritWidthOf === 'menu' ? 'auto' : undefined,
maxWidth,
position: props.menuPosition !== 'relative' ? 'relative' : undefined,
}}
>
{menuOptions.length ? (
menuOptions
Expand Down