title: How to edit the time picker of material-ui-time-picker?
body: <p>I have a <code>material-ui-time-picker</code> and I want to control this input, it works well, but I want to edit the time input from the keyboard and not when I click the input on the clock.</p>
  
  <p>My code is : </p>
  
  <pre><code>import React, { Component } from "react";
  import { TimePicker } from "material-ui-time-picker";
  import { Input as Time, Dialog as Clock } from "@material-ui/core";
  
  openDialog = () =&gt; this.setState({ isOpen: true });
    closeDialog = () =&gt; this.setState({ isOpen: false });
    handleDialogTimeChange = newValue =&gt; {
      const hours = newValue
        .getHours()
        .toString()
        .padStart(2, "0");
      const minutes = newValue
        .getMinutes()
        .toString()
        .padStart(2, "0");
      const textValue = hours + ":" + minutes;
      this.setState({ time: textValue });
    };
    handleKeyboardTimeChange = time =&gt; this.setState({ time });
    createDateFromTextValue = value =&gt; {
      const splitParts = value.split(":");
      return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
    };
  render() {
  
      return (
  
        &lt;div&gt;
          &lt;Time
            value={this.state.time}
            onChange={this.handleKeyboardTimeChange}
            endAdornment={
              &lt;InputAdornment position="end"&gt;
                &lt;IconButton onClick={this.openDialog}&gt;
                  &lt;AccessTime /&gt;
                &lt;/IconButton&gt;
              &lt;/InputAdornment&gt;
            }
            //}
          /&gt;
          &lt;Clock maxWidth="xs" open={this.state.isOpen}&gt;
            &lt;TimePicker
              mode="24h"
              value={this.createDateFromTextValue(this.state.time)}
              onChange={this.handleDialogTimeChange}
              autoOk={true}
              cancelLabel=""
              okLabel=""
              placeholder=""
              disableUnderline={true}
            /&gt;
          &lt;/Clock&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>My sandbox:  <a href="https://codesandbox.io/s/vm9wm19p27" rel="nofollow noreferrer">https://codesandbox.io/s/vm9wm19p27</a></p>
  
  <p>When I run it, I get this input, but when I edit his value, the input will be disappeared.</p>
  
  <p>How can I fix it ? </p>