fix(pf4): added menu portal option for downshift select

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -37,6 +37,13 @@ const loadOptions = (inputValue = '') => {
 
 const selectSchema = {
   fields: [
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-portal-select',
+      label: 'Simple portal select',
+      options,
+      menuIsPortal: true
+    },
     {
       component: componentTypes.SELECT,
       name: 'simple-async-select',

packages/pf4-component-mapper/demo/index.js

@@ -5,7 +5,7 @@ import FormRenderer from '@data-driven-forms/react-form-renderer';
 import miqSchema from './demo-schemas/miq-schema';
 import { uiArraySchema, arraySchema, array1Schema, schema, uiSchema, conditionalSchema, arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
-import { Title, Button, Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+import { Title, Button, Toolbar, ToolbarGroup, ToolbarItem, Modal } from '@patternfly/react-core';
 import { wizardSchema, wizardSchemaWithFunction, wizardSchemaSimple, wizardSchemaSubsteps, wizardSchemaMoreSubsteps } from './demo-schemas/wizard-schema';
 import sandboxSchema from './demo-schemas/sandbox';
 import dualSchema from './demo-schemas/dual-list-schema';

packages/pf4-component-mapper/src/common/select/menu.js

@@ -1,8 +1,72 @@
-import React from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
+import { createPortal } from 'react-dom';
 import Option from './option';
 import Input from './input';
 import EmptyOption from './empty-options';
 
+const getScrollParent = (element) => {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRx = /(auto|scroll)/;
+  const docEl = document.documentElement;
+
+  if (style.position === 'fixed') {
+    return docEl;
+  }
+
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+
+    if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
+    }
+  }
+
+  return docEl;
+};
+
+const getMenuPosition = (selectBase) => {
+  if (!selectBase) {
+    return {};
+  }
+
+  return selectBase.getBoundingClientRect();
+};
+
+const MenuPortal = ({ selectToggleRef, menuPortalTarget, children, isSearchable }) => {
+  const [position, setPosition] = useState(getMenuPosition(selectToggleRef.current));
+  useEffect(() => {
+    const scrollParentElement = getScrollParent(selectToggleRef.current);
+    const scrollListener = scrollParentElement.addEventListener('scroll', () => {
+      setPosition(getMenuPosition(selectToggleRef.current));
+    });
+    const resizeListener = window.addEventListener('resize', () => {
+      setPosition(getMenuPosition(selectToggleRef.current));
+    });
+    return () => {
+      window.removeEventListener('resize', resizeListener);
+      scrollParentElement.removeEventListener('scroll', scrollListener);
+    };
+  }, [selectToggleRef]);
+
+  const top = isSearchable ? position.top + position.height + 64 : position.top + position.height;
+  const portalDiv = (
+    <div
+      className={`pf-c-select ddorg_pf4-component-mapper__select-portal-menu${
+        isSearchable ? ' ddorg_pf4-component-mapper__select-portal-menu-searchable' : ''
+      }`}
+      style={{ borderTop: '4px solid white', zIndex: 401, position: 'absolute', top, left: position.left, width: position.width }}
+    >
+      {children}
+    </div>
+  );
+
+  return createPortal(portalDiv, menuPortalTarget);
+};
+
 const Menu = ({
   noResultsMessage,
   noOptionsMessage,
@@ -16,12 +80,15 @@ const Menu = ({
   highlightedIndex,
   selectedItem,
   isMulti,
-  isFetching
+  isFetching,
+  menuPortalTarget,
+  menuIsPortal,
+  selectToggleRef
 }) => {
   const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
-  return (
+  const menuItems = (
     <ul className="pf-c-select__menu">
-      {isSearchable && <Input inputRef={inputRef} getInputProps={getInputProps} />}
+      {!menuIsPortal && isSearchable && <Input inputRef={inputRef} getInputProps={getInputProps} />}
       {filteredOptions.length === 0 && (
         <EmptyOption
           isSearchable={isSearchable}
@@ -36,12 +103,29 @@ const Menu = ({
           item,
           index,
           isActive: highlightedIndex === index,
-          isSelected: isMulti ? !!selectedItem.find(({ value }) => item.value === value) : selectedItem === item.value
+          isSelected: isMulti ? !!selectedItem.find(({ value }) => item.value === value) : selectedItem === item.value,
+          onMouseUp: (e) => e.stopPropagation() // we need this to prevent issues with portal menu not selecting a option
         });
         return <Option key={item.value} item={item} {...itemProps} />;
       })}
     </ul>
   );
+  if (menuIsPortal) {
+    return (
+      <Fragment>
+        {isSearchable && (
+          <ul className="pf-c-select__menu">
+            <Input inputRef={inputRef} getInputProps={getInputProps} />
+          </ul>
+        )}
+        <MenuPortal isSearchable={isSearchable} menuPortalTarget={menuPortalTarget} selectToggleRef={selectToggleRef}>
+          {menuItems}
+        </MenuPortal>
+      </Fragment>
+    );
+  }
+
+  return menuItems;
 };
 
 export default Menu;

packages/pf4-component-mapper/src/common/select/option.js

@@ -21,7 +21,8 @@ Option.propTypes = {
     label: PropTypes.node
   }).isRequired,
   isActive: PropTypes.bool,
-  isSelected: PropTypes.bool
+  isSelected: PropTypes.bool,
+  onClick: PropTypes.func.isRequired
 };
 
 export default Option;

packages/pf4-component-mapper/src/common/select/select-styles.scss

@@ -7,6 +7,22 @@
   animation: spin 2s linear infinite;
 }
 
+.ddorg_pf4-component-mapper__select-portal-menu.ddorg_pf4-component-mapper__select-portal-menu-searchable {
+  &::before {
+    position: absolute;
+    bottom: -4px;
+    height: 4px;
+    left: 0;
+    right: 0;
+    background: white;
+    border-bottom-width: var(--pf-global--BorderWidth--sm);
+    border-bottom-color: var(--pf-global--BorderColor--dark-100);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    content: "";
+  }
+}
+
 .ddorg__pf4-component-mapper__select {
   &.single-select {
     .ddorg__pf4-component-mapper__select__placeholder {

packages/pf4-component-mapper/src/common/select/select.js

@@ -8,6 +8,7 @@ import { CaretDownIcon, CloseIcon, CircleNotchIcon } from '@patternfly/react-ico
 import '@patternfly/react-styles/css/components/Select/select.css';
 import '@patternfly/react-styles/css/components/Chip/chip.css';
 import '@patternfly/react-styles/css/components/ChipGroup/chip-group.css';
+import '@patternfly/react-styles/css/components/Divider/divider.css';
 
 import './select-styles.scss';
 import Menu from './menu';
@@ -90,7 +91,7 @@ const stateReducer = (state, changes, keepMenuOpen) => {
     case Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem:
       return {
         ...changes,
-        inputValue: typeof changes.inputValue === 'string' ? changes.inputValue : state.inputValue
+        inputValue: state.inputValue
       };
     default:
       return changes;
@@ -112,10 +113,13 @@ const InternalSelect = ({
   isFetching,
   onInputChange,
   loadingMessage,
+  menuPortalTarget,
+  menuIsPortal,
   ...props
 }) => {
   const [showMore, setShowMore] = useState(false);
   const inputRef = useRef();
+  const selectToggleRef = useRef();
   const parsedValue = parseInternalValue(value);
   const handleShowMore = () => setShowMore((prev) => !prev);
   const handleChange = (option) => onChange(getValue(isMulti, option, value));
@@ -136,7 +140,12 @@ const InternalSelect = ({
         const toggleButtonProps = getToggleButtonProps();
         return (
           <div className="pf-c-select">
-            <div disabled={isDisabled} className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}`} {...toggleButtonProps}>
+            <div
+              ref={selectToggleRef}
+              disabled={isDisabled}
+              className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}`}
+              {...toggleButtonProps}
+            >
               <div className="pf-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
                 <ValueContainer placeholder={placeholder} value={itemToString(selectedItem, isMulti, showMore, handleShowMore, handleChange)} />
               </div>
@@ -162,6 +171,9 @@ const InternalSelect = ({
                 highlightedIndex={highlightedIndex}
                 selectedItem={isMulti ? value : parsedValue}
                 isMulti={isMulti}
+                menuPortalTarget={menuPortalTarget}
+                menuIsPortal={menuIsPortal}
+                selectToggleRef={selectToggleRef}
               />
             )}
           </div>
@@ -192,7 +204,9 @@ InternalSelect.propTypes = {
   isMulti: PropTypes.bool,
   isFetching: PropTypes.bool,
   onInputChange: PropTypes.func,
-  loadingMessage: PropTypes.node
+  loadingMessage: PropTypes.node,
+  menuPortalTarget: PropTypes.any,
+  menuIsPortal: PropTypes.bool,
 };
 
 const Select = ({ selectVariant, menuIsPortal, ...props }) => {
@@ -201,7 +215,7 @@ const Select = ({ selectVariant, menuIsPortal, ...props }) => {
 
   const menuPortalTarget = menuIsPortal ? document.body : undefined;
 
-  return <DataDrivenSelect SelectComponent={InternalSelect} {...props} />;
+  return <DataDrivenSelect SelectComponent={InternalSelect} menuPortalTarget={menuPortalTarget} menuIsPortal={menuIsPortal} {...props} />;
 };
 
 Select.propTypes = {