Material-ui: [TextField] floatingLabelFocusStyle not working with floatingLabelFixed={true}

[meduza]

Problem description

floatingLabelFocusStyle and floatingLabelStyle work incorrect with floatingLabelFixed={true} option. In this case floatingLabel color always is blue:

<TextField
      floatingLabelText="Name"
      floatingLabelFixed={true}
      floatingLabelFocusStyle={{color: 'blue'}}
      floatingLabelStyle={{color: 'red'}}
  />

Versions

• Material-UI: [email protected].
• React: [email protected]
• Browser: Chrome Version 53.0.2785.143 (64-bit)

[paol]

Just ran into this problem as well. The floatingLabelFocusStyle is applied always, even when the field is not focused.

[paol]

Looking at the source code, the problem is this:

      <TextFieldLabel
        muiTheme={this.context.muiTheme}
        style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
        shrinkStyle={this.props.floatingLabelFocusStyle}
        htmlFor={inputId}
        shrink={this.state.hasValue || this.state.isFocused || floatingLabelFixed}
        disabled={disabled}
      >

The floatingLabelFocusStyle is not applied when the field is focused, as the name (and documentation) implies, but when the label is shrunk -- which is not the same thing.

This should be easy to fix:

      <TextFieldLabel
        muiTheme={this.context.muiTheme}
        style={Object.assign(styles.floatingLabel, (this.state.isFocused ? this.props.floatingLabelFocusStyle : this.props.floatingLabelStyle))}
        htmlFor={inputId}
        shrink={this.state.hasValue || this.state.isFocused || floatingLabelFixed}
        disabled={disabled}
      >

Note this leaves the shrinkStyle prop of TextFieldLabel unused; maybe it could be removed.

[lucasbento]

hey @paol, thanks for looking into it, would love if you could send a PR with the fix!

[paol]

Sure, I'll do a PR. I'm having second thoughts about the fix proposed above. What should the interpretation of the styles be:

• floatingLabelStyle - applies only when the field is unfocused
• floatingLabelFocusStyle - applies only when the field is focused

Or:

• floatingLabelStyle - applies always
• floatingLabelFocusStyle - applies on top of floatingLabelStyle, when the field is focused

The second one probably makes more sense. Thoughts?

[lucasbento]

cc @oliviertassinari.

[oliviertassinari]

This should be easy to fix

That's gonna change the behavior for people not using the floatingLabelFixed property.
I'm not sure about what the spec regarding the shrink / focus style. We might have an inconstancy here.
I believe that the next branch solve the problem correctly. Would be good to follow it.

The second one probably makes more sense. Thoughts?

That's most likely the current behavior when floatingLabelFixed is false.

P.S. I'm on my phone. I can't have a look at the source code.

[paol]

You're right, the code snippet I posted (which corresponds to option 1 I described above) would incorrectly change existing behavior.

Option 2 is the correct one. As far as I can reason it will not change existing behavior (except where that behavior is wrong, i.e. this bug)

I'll do a PR this weekend.

[oliviertassinari]

Actually, I'm wondering if this is not a regression introduced some month ago by the TextFieldLabel refactorisation.
We have a demo use example for it:

[oliviertassinari]

Thank guys, it should be fixed now! I'm gonna add a small unit test.

[valmassoi]

@oliviertassinari is that demo before or after the fix? I'm trying to do what that shows, but floatingLabelStyle changes the color of the placeholder too.

[oliviertassinari]

@valmassoi It's coming from the documentation http://www.material-ui.com/#/components/text-field. Here is the source code.

[valmassoi]

Ahh I didn't know about floatingLabelShrinkStyle. Works perfect thanks @oliviertassinari