<p dir="auto">The date picker will show the date minus 1-day value for a given date value in the date picker.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The date value assigned from the state object should populate the date picker date value as it is.</p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The date picker will show date - 1 value in the date pciker for a given date value populated through the state object."><pre class="notranslate"><code class="notranslate">The date picker will show date - 1 value in the date pciker for a given date value populated through the state object.
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="This can be easily reproduced and can be seen here - http://www.material-ui.com/v0.18.2/#/components/date-picker"><pre class="notranslate"><code class="notranslate">This can be easily reproduced and can be seen here - http://www.material-ui.com/v0.18.2/#/components/date-picker
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default class DatePickerExampleToggle extends React.Component {
  constructor(props) {
    super(props);

    const date = new Date();
    this.state = {
      date: date
    };
 }
 render() {
    return (
      &lt;div&gt;
        &lt;DatePicker
          floatingLabelText=&quot;Ranged Date Picker&quot;
          value={this.state.date}
        /&gt;
    }
  }
}"><pre class="notranslate"><code class="notranslate">export default class DatePickerExampleToggle extends React.Component {
  constructor(props) {
    super(props);

    const date = new Date();
    this.state = {
      date: date
    };
 }
 render() {
    return (
      &lt;div&gt;
        &lt;DatePicker
          floatingLabelText="Ranged Date Picker"
          value={this.state.date}
        /&gt;
    }
  }
}
</code></pre></div>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>18.2</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome (64.X)</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Problem Description</h2>
<p dir="auto">Using Chrome on a Mac, whenever I'm focused in a password type TextField and the Caps Lock key is activated, I get a large scaled-up icon like this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d64d60d0a6480eb683c8bb246de297d1aedbaaf7f960a885fd34a2ecb79867ff/687474703a2f2f692e696d6775722e636f6d2f31336a683155742e706e67"><img src="https://camo.githubusercontent.com/d64d60d0a6480eb683c8bb246de297d1aedbaaf7f960a885fd34a2ecb79867ff/687474703a2f2f692e696d6775722e636f6d2f31336a683155742e706e67" alt="screenshot of bug" data-canonical-src="http://i.imgur.com/13jh1Ut.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Versions</h2>
<ul dir="auto">
<li>Material-UI: 0.14.4</li>
<li>React: 0.14.6</li>
<li>Browser: Chrome 50.0.2661.86</li>
</ul>