[InputAdornment] Add disablePointerEvents prop

packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js

@@ -32,7 +32,7 @@ export const styles = theme => ({
     opacity: 0,
     transform: 'rotate(-45deg)',
   },
-  /* Styles applied to the `openIcon` if provided & if `open={true}` */
+  /* Styles applied to the `openIcon` if provided & if `open={true}`. */
   openIconOpen: {
     transform: 'rotate(0deg)',
     opacity: 1,

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

@@ -20,7 +20,7 @@ export const styles = theme => ({
     overflow: 'hidden',
     userSelect: 'none',
   },
-  /* Styles applied to the root element if there are children and not `src` or `srcSet` */
+  /* Styles applied to the root element if there are children and not `src` or `srcSet`. */
   colorDefault: {
     color: theme.palette.background.default,
     backgroundColor:

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

@@ -142,12 +142,12 @@ export const styles = theme => {
       color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
       fontSize: theme.typography.pxToRem(16),
     },
-    /* Styles applied to the `avatar` element if `color="primary"` */
+    /* Styles applied to the `avatar` element if `color="primary"`. */
     avatarColorPrimary: {
       color: theme.palette.primary.contrastText,
       backgroundColor: theme.palette.primary.dark,
     },
-    /* Styles applied to the `avatar` element if `color="secondary"` */
+    /* Styles applied to the `avatar` element if `color="secondary"`. */
     avatarColorSecondary: {
       color: theme.palette.secondary.contrastText,
       backgroundColor: theme.palette.secondary.dark,
@@ -163,11 +163,11 @@ export const styles = theme => {
       marginLeft: 4,
       marginRight: -8,
     },
-    /* Styles applied to the `icon` element if `color="primary"` */
+    /* Styles applied to the `icon` element if `color="primary"`. */
     iconColorPrimary: {
       color: 'inherit',
     },
-    /* Styles applied to the `icon` element if `color="secondary"` */
+    /* Styles applied to the `icon` element if `color="secondary"`. */
     iconColorSecondary: {
       color: 'inherit',
     },

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

@@ -4,12 +4,18 @@ import { StandardProps } from '..';
 export interface InputAdornmentProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, InputAdornmentClassKey> {
   component?: React.ReactType<InputAdornmentProps>;
+  disablePointerEvents?: boolean;
   disableTypography?: boolean;
   position: 'start' | 'end';
   variant?: 'standard' | 'outlined' | 'filled';
 }
 
-export type InputAdornmentClassKey = 'root' | 'positionStart' | 'positionEnd' | 'filled';
+export type InputAdornmentClassKey =
+  | 'root'
+  | 'filled'
+  | 'positionStart'
+  | 'positionEnd'
+  | 'disablePointerEvents';
 
 declare const InputAdornment: React.ComponentType<InputAdornmentProps>;
 

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

@@ -13,7 +13,7 @@ export const styles = {
     maxHeight: '2em',
     alignItems: 'center',
   },
-  /* Styles applied to the root element if `variant="filled"` */
+  /* Styles applied to the root element if `variant="filled"`. */
   filled: {
     '&$positionStart': {
       marginTop: 16,
@@ -27,6 +27,10 @@ export const styles = {
   positionEnd: {
     marginLeft: 8,
   },
+  /* Styles applied to the root element if `disablePointerEvents=true`. */
+  disablePointerEvents: {
+    pointerEvents: 'none',
+  },
 };
 
 function InputAdornment(props) {
@@ -35,6 +39,7 @@ function InputAdornment(props) {
     component: Component,
     classes,
     className,
+    disablePointerEvents,
     disableTypography,
     position,
     variant,
@@ -49,6 +54,7 @@ function InputAdornment(props) {
           [classes.filled]: variant === 'filled',
           [classes.positionStart]: position === 'start',
           [classes.positionEnd]: position === 'end',
+          [classes.disablePointerEvents]: disablePointerEvents,
         },
         className,
       )}
@@ -82,6 +88,11 @@ InputAdornment.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: componentPropType,
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the input on click.
+   */
+  disablePointerEvents: PropTypes.bool,
   /**
    * If children is a string then disable wrapping in a Typography component.
    */
@@ -98,6 +109,7 @@ InputAdornment.propTypes = {
 
 InputAdornment.defaultProps = {
   component: 'div',
+  disablePointerEvents: false,
   disableTypography: false,
 };
 

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

@@ -55,6 +55,15 @@ describe('<InputAdornment />', () => {
     assert.strictEqual(wrapper.hasClass(classes.filled), true);
   });
 
+  it('should have the disabled pointer events class when disabledPointerEvents true', () => {
+    const wrapper = shallow(
+      <InputAdornment disablePointerEvents position="start">
+        foo
+      </InputAdornment>,
+    );
+    assert.strictEqual(wrapper.hasClass(classes.disablePointerEvents), true);
+  });
+
   it('should not wrap text children in a Typography when disableTypography true', () => {
     const wrapper = shallow(
       <InputAdornment disableTypography position="start">

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

@@ -11,18 +11,18 @@ import Typography from '../Typography';
 export const styles = {
   /* Styles applied to the root element. */
   root: {},
-  /* Styles applied to the root element if `underline="none"` */
+  /* Styles applied to the root element if `underline="none"`. */
   underlineNone: {
     textDecoration: 'none',
   },
-  /* Styles applied to the root element if `underline="hover"` */
+  /* Styles applied to the root element if `underline="hover"`. */
   underlineHover: {
     textDecoration: 'none',
     '&:hover': {
       textDecoration: 'underline',
     },
   },
-  /* Styles applied to the root element if `underline="always"` */
+  /* Styles applied to the root element if `underline="always"`. */
   underlineAlways: {
     textDecoration: 'underline',
   },

pages/api/avatar.md

@@ -38,7 +38,7 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">colorDefault</span> | Styles applied to the root element if there are children and not `src` or `srcSet`
+| <span class="prop-name">colorDefault</span> | Styles applied to the root element if there are children and not `src` or `srcSet`.
 | <span class="prop-name">img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section

pages/api/chip.md

@@ -53,12 +53,12 @@ This property accepts the following keys:
 | <span class="prop-name">outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
 | <span class="prop-name">outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
 | <span class="prop-name">avatar</span> | Styles applied to the `avatar` element.
-| <span class="prop-name">avatarColorPrimary</span> | Styles applied to the `avatar` element if `color="primary"`
-| <span class="prop-name">avatarColorSecondary</span> | Styles applied to the `avatar` element if `color="secondary"`
+| <span class="prop-name">avatarColorPrimary</span> | Styles applied to the `avatar` element if `color="primary"`.
+| <span class="prop-name">avatarColorSecondary</span> | Styles applied to the `avatar` element if `color="secondary"`.
 | <span class="prop-name">avatarChildren</span> | Styles applied to the `avatar` elements children.
 | <span class="prop-name">icon</span> | Styles applied to the `icon` element.
-| <span class="prop-name">iconColorPrimary</span> | Styles applied to the `icon` element if `color="primary"`
-| <span class="prop-name">iconColorSecondary</span> | Styles applied to the `icon` element if `color="secondary"`
+| <span class="prop-name">iconColorPrimary</span> | Styles applied to the `icon` element if `color="primary"`.
+| <span class="prop-name">iconColorSecondary</span> | Styles applied to the `icon` element if `color="secondary"`.
 | <span class="prop-name">label</span> | Styles applied to the label `span` element`.
 | <span class="prop-name">deleteIcon</span> | Styles applied to the `deleteIcon` element.
 | <span class="prop-name">deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`.

pages/api/input-adornment.md

@@ -21,6 +21,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 | <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | The content of the component, normally an `IconButton` or string. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disablePointerEvents</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable pointer events on the root. This allows for the content of the adornment to focus the input on click. |
 | <span class="prop-name">disableTypography</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If children is a string then disable wrapping in a Typography component. |
 | <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'start'&nbsp;&#124;<br>&nbsp;'end'<br></span> |   | The position this adornment should appear relative to the `Input`. |
 | <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'standard'&nbsp;&#124;<br>&nbsp;'outlined'&nbsp;&#124;<br>&nbsp;'filled'<br></span> |   | The variant to use. |
@@ -36,9 +37,10 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">filled</span> | Styles applied to the root element if `variant="filled"`
+| <span class="prop-name">filled</span> | Styles applied to the root element if `variant="filled"`.
 | <span class="prop-name">positionStart</span> | Styles applied to the root element if `position="start"`.
 | <span class="prop-name">positionEnd</span> | Styles applied to the root element if `position="end"`.
+| <span class="prop-name">disablePointerEvents</span> | Styles applied to the root element if `disablePointerEvents=true`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/InputAdornment/InputAdornment.js)

pages/api/link.md

@@ -39,9 +39,9 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">underlineNone</span> | Styles applied to the root element if `underline="none"`
-| <span class="prop-name">underlineHover</span> | Styles applied to the root element if `underline="hover"`
-| <span class="prop-name">underlineAlways</span> | Styles applied to the root element if `underline="always"`
+| <span class="prop-name">underlineNone</span> | Styles applied to the root element if `underline="none"`.
+| <span class="prop-name">underlineHover</span> | Styles applied to the root element if `underline="hover"`.
+| <span class="prop-name">underlineAlways</span> | Styles applied to the root element if `underline="always"`.
 | <span class="prop-name">button</span> | Styles applied to the root element if `component="button"`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section

pages/lab/api/speed-dial-icon.md

@@ -37,7 +37,7 @@ This property accepts the following keys:
 | <span class="prop-name">iconOpen</span> | Styles applied to the icon component if `open={true}`.
 | <span class="prop-name">iconWithOpenIconOpen</span> | Styles applied to the icon when and `openIcon` is provided & if `open={true}`.
 | <span class="prop-name">openIcon</span> | Styles applied to the `openIcon` if provided.
-| <span class="prop-name">openIconOpen</span> | Styles applied to the `openIcon` if provided & if `open={true}`
+| <span class="prop-name">openIconOpen</span> | Styles applied to the `openIcon` if provided & if `open={true}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js)