Material-ui: FormControl/TextField label not floats onFocus with custom onFocus-prop

[PutziSan]

Problem description

the onFocus floating effect is lost, when overriding the onFocus-props of a TextField- or FormControl-Component. (same problem with onBlur btw)

Link to minimal working code that reproduces the issue

https://www.webpackbin.com/bins/-KkudROJc3XfIoli7IxX

Versions

• Material-UI: 1.0.0-alpha.15
• React: 15.5.4
• Browser: chrome 58.0.3029.110 (64-bit)

possible solution

override the handleFocus and handleBlur-function and rearrange the props in the FormControl-Component:

class FormControl extends Component {
  (...)
  handleFocus = () => {
      if (!this.state.focused) {
        this.setState({ focused: true });
      }
      if (this.props.onFocus) {
        this.props.onFocus();
      }
  };

  render() {
      return (<div
          className={classNames(classes.root, className)}
          {...other}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        >
          {children}
        </div>
      );
  }
  (...)
}

`

[oliviertassinari]

@PutziSan Good catch! Do you want to submit a PR to fix the issue? 😄

[rexpan]

@PutziSan @oliviertassinari
A workaround is using the TextField.inputProps

<TextField label="TextField" />
<TextField label="TextField.onBlur" onBlur={() => {}} />
<TextField label="TextField.inputProps.onBlur" 
    inputProps={{onBlur:() => {}}} />
<TextField label="TextField.InputProps.onBlur" 
    InputProps={{onBlur:() => {}}} />

[oliviertassinari]

We will soon release the latest fixes.

[romannep]

Add please this to documentation - neither in Input nor in FormControl i cant find info about redefine onBlur event.