fix(selector-dropdown): add dynamic positioning to the dropdown overlay

Author: boxithai

src/components/pill-selector-dropdown/PillSelector.js

@@ -18,19 +18,20 @@ function stopDefaultEvent(event) {
 }
 
 type Props = {
-    allowInvalidPills: boolean,
+    allowInvalidPills?: boolean,
     className?: string,
     disabled?: boolean,
     error?: React.Node,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
     getPillImageUrl?: (data: { id: string | number, [key: string]: any }) => string,
-    inputProps: Object,
+    innerRef?: React.Ref<any>,
+    inputProps?: Object,
     onInput: Function,
     onRemove: Function,
     onSuggestedPillAdd?: Function,
-    placeholder: string,
+    placeholder?: string,
     selectedOptions: Array<Object> | List<Object>,
     /** Whether to show avatars in pills (if rounded style is enabled) */
     showAvatars?: boolean,
@@ -39,7 +40,7 @@ type Props = {
     suggestedPillsData?: Array<Object>,
     suggestedPillsFilter?: SuggestedPillsFilter,
     suggestedPillsTitle?: string,
-    validator: (option: Option | OptionValue) => boolean,
+    validator?: (option: Option | OptionValue) => boolean,
 };
 
 type State = {
@@ -54,6 +55,7 @@ class PillSelector extends React.Component<Props, State> {
         error: '',
         inputProps: {},
         placeholder: '',
+        // $FlowFixMe
         selectedOptions: [],
         validator: () => true,
     };
@@ -179,6 +181,7 @@ class PillSelector extends React.Component<Props, State> {
             onRemove,
             onSuggestedPillAdd,
             placeholder,
+            innerRef,
             selectedOptions,
             showAvatars,
             showRoundedPills,
@@ -213,13 +216,15 @@ class PillSelector extends React.Component<Props, State> {
                     onClick={this.handleClick}
                     onFocus={this.handleFocus}
                     onKeyDown={this.handleKeyDown}
+                    ref={innerRef}
                 >
                     {showRoundedPills
                         ? selectedOptions.map((option: RoundOption, index: number) => {
                               return (
                                   <RoundPill
                                       className={getPillClassName ? getPillClassName(option) : undefined}
                                       getPillImageUrl={getPillImageUrl}
+                                      // $FlowFixMe
                                       isValid={allowInvalidPills ? validator(option) : true}
                                       isDisabled={disabled}
                                       isSelected={index === selectedIndex}
@@ -238,6 +243,7 @@ class PillSelector extends React.Component<Props, State> {
                               // TODO: This and associated types will be removed once all views are updates with round pills.
                               return (
                                   <Pill
+                                      // $FlowFixMe
                                       isValid={allowInvalidPills ? validator(option) : true}
                                       isDisabled={disabled}
                                       isSelected={index === selectedIndex}
@@ -289,4 +295,10 @@ class PillSelector extends React.Component<Props, State> {
     }
 }
 
-export default PillSelector;
+export { PillSelector as PillSelectorBase };
+const PillSelectorContainer = React.forwardRef<Props, React.Ref<any>>((props: Props, ref: React.Ref<any>) => (
+    <PillSelector {...props} innerRef={ref} />
+));
+PillSelectorContainer.displayName = 'PillSelector';
+
+export default PillSelectorContainer;

src/components/pill-selector-dropdown/__tests__/PillSelector.test.js

@@ -3,7 +3,7 @@ import { mount, shallow } from 'enzyme';
 import { List, Record } from 'immutable';
 import sinon from 'sinon';
 
-import PillSelector from '../PillSelector';
+import { PillSelectorBase as PillSelector } from '../PillSelector';
 
 const sandbox = sinon.sandbox.create();
 

src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js

@@ -45,17 +45,6 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             expect(selectorDropdown.contains(children)).toBe(true);
         });
 
-        test('should render pill selector', () => {
-            const inputProps = { 'aria-label': 'test' };
-            const wrapper = getWrapper({ inputProps });
-            wrapper.setState({ inputValue: 'value' });
-            const pillSelector = shallow(wrapper.find('SelectorDropdown').prop('selector'));
-            const instance = pillSelector.instance();
-            expect(pillSelector.prop('onInput')).toEqual(instance.handleInput);
-            expect(pillSelector.prop('onPaste')).toEqual(instance.handlePaste);
-            expect(pillSelector.instance().props.value).toEqual('value');
-        });
-
         test('should render disabled pill selector', () => {
             const wrapper = getWrapper({ disabled: true });
 

src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.js.snap

@@ -6,12 +6,11 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdown render() should
   onEnter={[Function]}
   onSelect={[Function]}
   selector={
-    <PillSelector
+    <ForwardRef
       allowInvalidPills={false}
       aria-label="test"
       disabled={true}
       error=""
-      inputProps={Object {}}
       onBlur={[Function]}
       onChange={[Function]}
       onCompositionEnd={[Function]}

src/components/selector-dropdown/SelectorDropdown.js

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import uniqueId from 'lodash/uniqueId';
 
 import { scrollIntoView } from '../../utils/dom';
+import PopperComponent from '../popper';
+import { PLACEMENT_BOTTOM_START } from '../popper/constants';
 import ScrollWrapper from '../scroll-wrapper';
-import { OVERLAY_WRAPPER_CLASS } from '../../constants';
 
 import './SelectorDropdown.scss';
 
@@ -311,13 +312,13 @@ class SelectorDropdown extends React.Component<Props, State> {
                 onPaste={this.handleInput}
                 ref={this.selectorDropdownRef}
             >
-                {React.cloneElement(selector, { inputProps })}
-                {isOpen && (
-                    <div className={`${OVERLAY_WRAPPER_CLASS} is-visible`}>
+                <PopperComponent placement={PLACEMENT_BOTTOM_START} isOpen={isOpen}>
+                    {React.cloneElement(selector, { inputProps })}
+                    <div className="SelectorDropdown-overlay-wrapper">
                         {title}
                         {shouldScroll ? <ScrollWrapper>{list}</ScrollWrapper> : list}
                     </div>
-                )}
+                </PopperComponent>
             </div>
         );
     }

src/components/selector-dropdown/SelectorDropdown.scss

@@ -13,7 +13,7 @@
         @include bdl-Overlay-container;
     }
 
-    .overlay-wrapper,
+    .SelectorDropdown-overlay-wrapper,
     .overlay {
         display: block;
         width: 100%;

src/elements/content-sidebar/skills/keywords/__tests__/__snapshots__/EditableKeywords.test.js.snap

@@ -4,19 +4,14 @@ exports[`elements/content-sidebar/Skills/Keywords/EditableKeywords should correc
 <span
   className="bdl-EditableKeywords"
 >
-  <PillSelector
-    allowInvalidPills={false}
-    disabled={false}
-    error=""
-    inputProps={Object {}}
+  <ForwardRef
     onBlur={[Function]}
     onCompositionEnd={[Function]}
     onCompositionStart={[Function]}
     onInput={[Function]}
     onKeyDown={[Function]}
     onPaste={[Function]}
     onRemove={[Function]}
-    placeholder=""
     selectedOptions={
       Array [
         Object {
@@ -29,7 +24,6 @@ exports[`elements/content-sidebar/Skills/Keywords/EditableKeywords should correc
         },
       ]
     }
-    validator={[Function]}
     value=""
   />
   <div