Material Input Animations aren't working



  • Hey all. I’m having some trouble getting a React based Input control to successfully work with the Material Theme.

    0_1470617088128_material_input.png

    As you can see by the above, the animation that moves the placeholder text up doesn’t seem to be working, so the actual input scribbles over the placeholder text.

    Any chance I’m doing something wrong that is causing this?

    This is how I’m declaring the input control:

    <Input
        style={styles.username}
        value={this.state.username}
        onChange={this.usernameChanged.bind(this)}
        placeholder="Username"
        type="text"
        modifier="underbar"
        float
    />
    <Input
        style={styles.password}
        value={this.state.password}
        onChange={this.passwordChanged.bind(this)}
        placeholder="Password"
        type="password"
        modifier="underbar"
        float
    />
    

    Any help would be greatly appreciated.



  • @sherscher it looks like a bug, however I cannot really reproduce it. Can you maybe change this example ( http://tutorial.onsen.io/?framework=react&category=Reference&module=input) to some example that can be reproduced and export it to CodePan. Since this is probably a bug, it would be good to make an issue on Github



  • I’ll try to get you something that is reproducible.



  • I have two machines. One was running RC15 and the animations worked. One running RC16 got the bug. RC17 seems to have the bug too.

    So, we can conclude this bug was introduced in RC16, if that helps.


  • Onsen UI

    @sherscher Thanks for reporting. Can you mention the Android version? We’ll try to fix this.



  • @Fran-Diox Actually…don’t thank me. The problem was that I updated to RC16 but didn’t grab the new CSS correctly. Once the correct CSS was there…problem went away.

    Sorry for any thrash.

    Scott


  • Onsen UI

    @sherscher I see, no problem!

    @argelius will be happy to know this :sweat_smile:


Log in to reply