[input] Forward required, readOnly and autoFocus (#12234)

* forward required, readonly and autofocus to switchBase

* let's merge

Author: sakulstra

.eslintrc.js

@@ -106,7 +106,8 @@ module.exports = {
 
     'prettier/prettier': 'error',
 
-    'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/label-has-associated-control': 'error',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
   },
 };

packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js

@@ -111,7 +111,7 @@ ToggleButtonGroup.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true` only allow one of the child ToggleButton values to be selected.
+   * If `true`, only allow one of the child ToggleButton values to be selected.
    */
   exclusive: PropTypes.bool,
   /**
@@ -123,7 +123,7 @@ ToggleButtonGroup.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * If `true` render the group in a selected state. If `auto` (the default)
+   * If `true`, render the group in a selected state. If `auto` (the default)
    * render in a selected state if `value` is not empty.
    */
   selected: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['auto'])]),

packages/material-ui/src/Input/Input.d.ts

@@ -23,6 +23,7 @@ export interface InputProps
   multiline?: boolean;
   name?: string;
   placeholder?: string;
+  required?: boolean;
   rows?: string | number;
   rowsMax?: string | number;
   startAdornment?: React.ReactNode;

packages/material-ui/src/Input/Input.js

@@ -207,25 +207,28 @@ function formControlState(props, context) {
   let disabled = props.disabled;
   let error = props.error;
   let margin = props.margin;
+  let required = props.required;
 
   if (context && context.muiFormControl) {
     if (typeof disabled === 'undefined') {
       disabled = context.muiFormControl.disabled;
     }
-
     if (typeof error === 'undefined') {
       error = context.muiFormControl.error;
     }
-
     if (typeof margin === 'undefined') {
       margin = context.muiFormControl.margin;
     }
+    if (typeof required === 'undefined') {
+      required = context.muiFormControl.required;
+    }
   }
 
   return {
     disabled,
     error,
     margin,
+    required,
   };
 }
 
@@ -422,7 +425,7 @@ class Input extends React.Component {
     } = this.props;
 
     const { muiFormControl } = this.context;
-    const { disabled, error, margin } = formControlState(this.props, this.context);
+    const { disabled, error, margin, required } = formControlState(this.props, this.context);
 
     const className = classNames(
       classes.root,
@@ -450,8 +453,6 @@ class Input extends React.Component {
       inputPropsClassName,
     );
 
-    const required = muiFormControl && muiFormControl.required === true;
-
     let InputComponent = 'input';
     let inputProps = {
       ...inputPropsProp,
@@ -500,7 +501,7 @@ class Input extends React.Component {
           onKeyUp={onKeyUp}
           placeholder={placeholder}
           readOnly={readOnly}
-          required={required ? true : undefined}
+          required={required}
           rows={rows}
           type={type}
           value={value}
@@ -624,9 +625,14 @@ Input.propTypes = {
    */
   placeholder: PropTypes.string,
   /**
-   * @ignore
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
    */
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, the input will be required.
+   */
+  required: PropTypes.bool,
   /**
    * Number of rows to display when multiline option is set to true.
    */

packages/material-ui/src/Modal/Modal.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-autofocus */
-
 import React from 'react';
 import { assert } from 'chai';
 import { spy, stub } from 'sinon';

packages/material-ui/src/TextField/TextField.js

@@ -232,7 +232,7 @@ TextField.propTypes = {
    */
   placeholder: PropTypes.string,
   /**
-   * If `true`, the label is displayed as required.
+   * If `true`, the label is displayed as required and the input will be required.
    */
   required: PropTypes.bool,
   /**

packages/material-ui/src/internal/SwitchBase.d.ts

@@ -4,6 +4,7 @@ import { IconButtonProps } from '../IconButton';
 
 export interface SwitchBaseProps
   extends StandardProps<IconButtonProps, SwitchBaseClassKey, 'onChange'> {
+  autoFocus?: boolean;
   checked?: boolean | string;
   checkedIcon: React.ReactNode;
   defaultChecked?: boolean;
@@ -16,6 +17,8 @@ export interface SwitchBaseProps
   inputRef?: React.Ref<any>;
   name?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  readOnly?: boolean;
+  required?: boolean;
   tabIndex?: number;
   value?: string;
 }

packages/material-ui/src/internal/SwitchBase.js

@@ -87,6 +87,7 @@ class SwitchBase extends React.Component {
 
   render() {
     const {
+      autoFocus,
       checked: checkedProp,
       checkedIcon,
       classes,
@@ -100,6 +101,8 @@ class SwitchBase extends React.Component {
       onBlur,
       onChange,
       onFocus,
+      readOnly,
+      required,
       tabIndex,
       type,
       value,
@@ -138,16 +141,19 @@ class SwitchBase extends React.Component {
       >
         {checked ? checkedIcon : icon}
         <input
-          id={hasLabelFor && id}
-          type={type}
-          name={name}
+          autoFocus={autoFocus}
           checked={checked}
-          onChange={this.handleInputChange}
           className={classes.input}
           disabled={disabled}
+          id={hasLabelFor && id}
+          name={name}
+          onChange={this.handleInputChange}
+          readOnly={readOnly}
+          ref={inputRef}
+          required={required}
           tabIndex={tabIndex}
+          type={type}
           value={value}
-          ref={inputRef}
           {...inputProps}
         />
       </IconButton>
@@ -158,6 +164,10 @@ class SwitchBase extends React.Component {
 // NB: If changed, please update Checkbox, Switch and Radio
 // so that the API documentation is updated.
 SwitchBase.propTypes = {
+  /**
+   * If `true`, the input will be focused during the first mount.
+   */
+  autoFocus: PropTypes.bool,
   /**
    * If `true`, the component is checked.
    */
@@ -231,6 +241,15 @@ SwitchBase.propTypes = {
    * @ignore
    */
   onFocus: PropTypes.func,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the input will be required.
+   */
+  required: PropTypes.bool,
   /**
    * @ignore
    */

pages/api/input.md

@@ -34,6 +34,8 @@ title: Input API
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | Name attribute of the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. |
 | <span class="prop-name">placeholder</span> | <span class="prop-type">string |   | The short hint displayed in the input before the user enters a value. |
+| <span class="prop-name">readOnly</span> | <span class="prop-type">bool |   | It prevents the user from changing the value of the field (not from interacting with the field). |
+| <span class="prop-name">required</span> | <span class="prop-type">bool |   | If `true`, the input will be required. |
 | <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Number of rows to display when multiline option is set to true. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Maximum number of rows to display when multiline option is set to true. |
 | <span class="prop-name">startAdornment</span> | <span class="prop-type">node |   | Start `InputAdornment` for this component. |

pages/api/text-field.md

@@ -59,7 +59,7 @@ For advanced cases, please look at the source of TextField by clicking on the
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | Name attribute of the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. |
 | <span class="prop-name">placeholder</span> | <span class="prop-type">string |   | The short hint displayed in the input before the user enters a value. |
-| <span class="prop-name">required</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label is displayed as required. |
+| <span class="prop-name">required</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label is displayed as required and the input will be required. |
 | <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Number of rows to display when multiline option is set to true. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Maximum number of rows to display when multiline option is set to true. |
 | <span class="prop-name">select</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children. |