fix browser fail

docs/src/pages/components/checkboxes/checkboxes.md

@@ -41,7 +41,7 @@ In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-l
 ```jsx
 <Checkbox
   value="checkedA"
-  inputProps={{ 'aria-label': 'Checkbox A' } }
+  inputProps={{ 'aria-label': 'Checkbox A' }}
 />
 ```
 

docs/src/pages/components/radio-buttons/radio-buttons.md

@@ -38,7 +38,7 @@ In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-l
 ```jsx
 <RadioButton
   value="radioA"
-  inputProps={{ 'aria-label': 'Radio A' } }
+  inputProps={{ 'aria-label': 'Radio A' }}
 />
 ```
 

docs/src/pages/components/switches/switches.md

@@ -49,6 +49,6 @@ In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-l
 ```jsx
 <Switch
   value="checkedA"
-  inputProps={{ 'aria-label': 'Switch A' } }
+  inputProps={{ 'aria-label': 'Switch A' }}
 />
 ```

docs/src/pages/components/text-fields/text-fields.md

@@ -113,6 +113,11 @@ or
 
 You can use third-party libraries to format an input.
 You have to provide a custom implementation of the `<input>` element with the `inputComponent` property.
+
+The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
+
+{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
+
 The provided input component should handle the `inputRef` property.
 The property should be called with a value that implements the following interface:
 
@@ -148,11 +153,6 @@ function MyInputComponent(props) {
 />;
 ```
 
-The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could
-be applied to e.g. `react-stripe-element`.
-
-{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
-
 ## Accessibility
 
 In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure.

docs/src/pages/customization/components/components.md

@@ -190,7 +190,7 @@ compiles to:
   classes={{
     root: classes.root, // class name, e.g. `root-x`
     disabled: classes.disabled, // class name, e.g. `disabled-x`
-  } }
+  }}
 >
 ```
 

docs/src/pages/guides/migration-v3/migration-v3.md

@@ -383,8 +383,8 @@ You should be able to move the custom styles to the `root` class key.
 
   ```diff
   <InputLabel
-  - FormLabelClasses={{ asterisk: 'bar' } }
-  + classes={{ asterisk: 'bar' } }
+  - FormLabelClasses={{ asterisk: 'bar' }}
+  + classes={{ asterisk: 'bar' }}
   >
     Foo
   </InputLabel>

docs/src/pages/styles/advanced/advanced.md

@@ -580,7 +580,7 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 <style
   id="jss-server-side"
   nonce={nonce}
-  dangerouslySetInnerHTML={{ __html: sheets.toString() } }
+  dangerouslySetInnerHTML={{ __html: sheets.toString() }}
 />
 ```
 

docs/src/pages/system/basics/basics.md

@@ -211,8 +211,8 @@ const Box = styled.div`
 
 <Box
   p={2}
-  sm={{ p: 3 } }
-  md={{ p: 4 } }
+  sm={{ p: 3 }}
+  md={{ p: 4 }}
 />
 
 /**

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

@@ -184,21 +184,32 @@ describe('<InputBase />', () => {
     });
 
     it('throws on change if `inputRef` isnt forwarded', () => {
-      // eslint-disable-next-line react/prop-types
-      const BadInputComponent = React.forwardRef(({ inputRef, ...props }, ref) => {
+      const BadInputComponent = React.forwardRef(({ action, inputRef, ...props }, ref) => {
+        React.useImperativeHandle(action, () => ({
+          trigger: () => {
+            props.onChange({}, {});
+          },
+        }));
+
         // `inputRef` belongs into `ref`
         return <input {...props} ref={ref} />;
       });
 
-      const wrapper = mount(<InputBase inputComponent={BadInputComponent} />);
-      // assert.throws causes uncaught error in the browser
+      BadInputComponent.propTypes = {
+        action: PropTypes.object.isRequired,
+        inputRef: PropTypes.func.isRequired,
+        onChange: PropTypes.func.isRequired,
+      };
+
+      const handleRef = React.createRef();
+      render(<InputBase inputProps={{ action: handleRef }} inputComponent={BadInputComponent} />);
       let errorMessage = null;
       try {
-        wrapper.find('input').simulate('change', { target: null });
+        handleRef.current.trigger();
       } catch (error) {
         errorMessage = String(error);
       }
-      assert.include(errorMessage, 'Material-UI: Expected valid input target');
+      expect(errorMessage).to.include('Material-UI: Expected valid input target');
     });
   });