[Select] Add SelectDisplayProps prop

pages/api/select.md

@@ -26,6 +26,7 @@ filename: /src/Select/Select.js
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func |  | Callback fired when the component requests to be opened. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">open</span> | <span class="prop-type">bool |  | Control `select` open state. You can only use it when the `native` property is `false` (default). |
 | <span class="prop-name">renderValue</span> | <span class="prop-type">func |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">SelectDisplayProps</span> | <span class="prop-type">object |  | Properties applied to the clickable div element. |
 | <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

src/Select/Select.d.ts

@@ -14,6 +14,7 @@ export interface SelectProps extends StandardProps<InputProps, SelectClassKey, '
   onOpen?: (event: React.ChangeEvent<{}>) => void;
   open?: boolean;
   renderValue?: (value: SelectProps['value']) => React.ReactNode;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
   value?: Array<string | number> | string | number;
 }
 

src/Select/Select.js

@@ -73,17 +73,15 @@ function Select(props) {
     onOpen,
     open,
     renderValue,
+    SelectDisplayProps,
     ...other
   } = props;
 
   return React.cloneElement(input, {
     // Most of the logic is implemented in `SelectInput`.
     // The `Select` component is a simple API wrapper to expose something better to play with.
     inputComponent: SelectInput,
-    ...other,
     inputProps: {
-      ...inputProps,
-      ...(input ? input.props.inputProps : {}),
       autoWidth,
       children,
       classes,
@@ -95,7 +93,11 @@ function Select(props) {
       onOpen,
       open,
       renderValue,
+      SelectDisplayProps,
+      ...inputProps,
+      ...(input ? input.props.inputProps : {}),
     },
+    ...other,
   });
 }
 
@@ -172,6 +174,10 @@ Select.propTypes = {
    * You can only use it when the `native` property is `false` (default).
    */
   renderValue: PropTypes.func,
+  /**
+   * Properties applied to the clickable div element.
+   */
+  SelectDisplayProps: PropTypes.object,
   /**
    * The input value, required for a controlled component.
    */

src/Select/SelectInput.d.ts

@@ -20,6 +20,7 @@ export interface SelectInputProps extends StandardProps<{}, SelectInputClassKey>
   open?: boolean;
   readOnly?: boolean;
   renderValue?: (value: SelectInputProps['value']) => React.ReactNode;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
   value?: string | number | Array<string | number>;
 }
 

src/Select/SelectInput.js

@@ -154,6 +154,7 @@ class SelectInput extends React.Component {
       open: openProp,
       readOnly,
       renderValue,
+      SelectDisplayProps,
       value,
       ...other
     } = this.props;
@@ -284,6 +285,7 @@ class SelectInput extends React.Component {
           onBlur={this.handleBlur}
           onClick={disabled || readOnly ? null : this.handleClick}
           onFocus={onFocus}
+          {...SelectDisplayProps}
         >
           {/* So the vertical align positioning algorithm quicks in. */}
           {/* eslint-disable-next-line react/no-danger */}
@@ -416,6 +418,10 @@ SelectInput.propTypes = {
    * You can only use it when the `native` property is `false` (default).
    */
   renderValue: PropTypes.func,
+  /**
+   * Properties applied to the clickable div element.
+   */
+  SelectDisplayProps: PropTypes.object,
   /**
    * The value of the component, required for a controlled component.
    */

src/Select/SelectInput.spec.js

@@ -79,6 +79,17 @@ describe('<SelectInput />', () => {
     });
   });
 
+  describe('prop: SelectDisplayProps', () => {
+    it('should apply additional properties to the clickable div element', () => {
+      const wrapper = shallow(
+        <SelectInput {...defaultProps} SelectDisplayProps={{ 'data-test': 'SelectDisplay' }} />,
+      );
+
+      const selectDisplay = wrapper.find('[data-mui-test="SelectDisplay"]');
+      assert.strictEqual(selectDisplay.props()['data-test'], 'SelectDisplay');
+    });
+  });
+
   describe('prop: displayEmpty', () => {
     it('should display the selected item even if its value is empty', () => {
       const wrapper = shallow(