fix: add popoverProps to Select (#1150)

* add popover props to Select

* move props

Author: meganaconley

src/Select/Select.js

@@ -25,6 +25,7 @@ const Select = React.forwardRef(({
     onClick,
     onSelect,
     placeholder,
+    popoverProps,
     readOnly,
     selectedKey,
     validationState,
@@ -135,6 +136,9 @@ const Select = React.forwardRef(({
 
     return (
         <Popover
+            placement='bottom-start'
+            widthSizingType='minTarget'
+            {...popoverProps}
             body={
                 (<>
                     {validationState &&
@@ -169,11 +173,9 @@ const Select = React.forwardRef(({
             disableTriggerOnClick={disabled || readOnly}
             firstFocusIndex={firstFocusIndex}
             noArrow
-            placement='bottom-start'
             ref={popoverRef}
             type='listbox'
-            useArrowKeyNavigation
-            widthSizingType='minTarget' />
+            useArrowKeyNavigation />
     );
 });
 
@@ -199,6 +201,8 @@ Select.propTypes = {
     })),
     /** Localized placeholder text of the input */
     placeholder: PropTypes.string,
+    /** Additional props to be spread to the Popover component */
+    popoverProps: PropTypes.object,
     /** Set to **true** to enable readonly mode */
     readOnly: PropTypes.bool,
     /** The key corresponding to the selected option */

src/Select/Select.test.js

@@ -10,6 +10,10 @@ describe('<Select />', () => {
         { key: '4', text: 'List Item 4' }
     ];
 
+    const popoverProps = {
+        ['data-sample']: 'Popper-sample'
+    };
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Select component', () => {
             const element = mount(
@@ -18,6 +22,16 @@ describe('<Select />', () => {
 
             expect(element.find('.fd-select').getDOMNode().attributes['data-sample'].value).toBe('Sample');
         });
+
+        test('should allow props to be spread to the Popover component', () => {
+            const element = mount(
+                <Select options={options} popoverProps={popoverProps} />
+            );
+
+            expect(
+                element.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
+            ).toBe('Popper-sample');
+        });
     });
 
     describe('interactions', () => {