Usage with redux-form
Opened this issue · 0 comments
djfdev commented
I'm honestly not sure if this is an issue with redux-form, bloomer, or my concoction of the two, but I'm experiencing a very strange issue. Basically I have a component that wraps a bloomer Input
in a Field
from the redux-form library:
import React, { Component } from 'react'
import { Field } from 'redux-form'
import { Input as BInput } from 'bloomer'
class Input extends Component {
renderInput (field) {
return (
<BInput
id={this.props.id}
type={this.props.type}
value={field.input.value}
onChange={field.input.onChange}
/>
)
}
render () {
return (
<Field
name={this.props.name}
component={this.renderInput.bind(this)}
/>
)
}
}
export default Input
Here's an example use inside of a form:
import React from 'react'
import { reduxForm } from 'redux-form'
import { Field, Label, Control } from 'bloomer'
import Input from '../Input'
let LoginForm = props => {
const { handleSubmit } = props
return (
<form onSubmit={handleSubmit}>
<Field>
<Label htmlFor="user_email">Email</Label>
<Control>
<Input id="user_email" name="email" type="text" />
</Control>
</Field>
<Field>
<Label htmlFor="user_password">Password</Label>
<Control>
<Input id="user_password" name="password" type="password" />
</Control>
</Field>
<button type="submit">Submit</button>
</form>
)
}
LoginForm = reduxForm({
form: 'login'
})(LoginForm)
export default LoginForm
When I focus on the input and type a single character, the input blurs and I lose focus. What's especially strange is that upon refocusing the input and typing a second character, the behavior does not persist and I am able to continue typing as usual. Any clues as to what's going on here?