Material-ui-pickers: Weird picker behavior when wrapped into a FormControl

[charlax]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0 RC3 |
| material-ui | 1.0.0-beta.33 |
| React | 16.2.0 |
| Browser | Version 65.0.3325.162 (Official Build) (64-bit) |
| Platform | |

Steps to reproduce

Just wrap your DatePicker component into a FormControl. See live example at the end of this ticket.

import React from 'react';
import { DatePicker } from 'material-ui-pickers';
import { FormControl } from 'material-ui/Form';

class App extends React.Component {
  state = { date: Date.now() };

  handleDateChange = (date) => {
    this.setState({ date });
  };

  render() {
    return (
      <FormControl>
      <DatePicker
        format="DD/MM/YYYY"
        keyboard
        autoOk
        clearable
        value={this.state.date}
        onChange={this.handleDateChange}
        animateYearScrolling={false}
      />
      </FormControl>
    )
  }
}

export default App;

Expected behavior

Normal date picking behavior

Actual behavior

At least two weird things happen when you try picking a date:

1. You can't pick a date outside of the current month. If you try picking a date in another month, the picker will refresh and show you the current month instead.
2. When navigating months, you can't come back to the current month. For instance, we're in March as of writing, if you use the back arrow to go back to February, then the next arrow to go back to March, you will go to April instead.

Live example

https://codesandbox.io/s/l32rnjqn6l

Debugging & research

This weird behavior does not happen when you use the keyboard.

I investigated a little bit and it looks like the handleClick event is not even dispatched when you click on a day. Another weird thing is that any click, including in the JS console, will make the picker go back to the current month.

[charlax]

Some more research:

• I tried changing the FormControl's margin setting, no change.
• The fact that this only applies to click events and that keyboard selection works fine tells me that something might be hijacking the onClick event.

[dmtrKovalenko]

DO NOT wrap pickers in the FormControl. Material-ui-pickers renders TextField

It's important to understand that the text field is a simple abstraction on top of the following components:

• FormControl
• InputLabel
• Input
• FormHelperText

[dmtrKovalenko]

217