Combobox: Allow PopperJS to position menu correctly

This enables dialog flip and preventing overflow

Author: interactivellama

components/combobox/combobox.jsx

@@ -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}

components/combobox/private/menu.jsx

@@ -107,13 +107,18 @@ 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 style = {
+		width: props.inheritWidthOf === 'menu' ? 'auto' : undefined,
+		maxWidth,
+		position: props.menuPosition !== 'relative' ? 'relative' : undefined,
+	};
 	const menuOptions = props.options.map((optionData, index) => {
 		const active =
 			index === props.activeOptionIndex &&