AlgusDark/bloomer

Usage with redux-form

Opened this issue · 0 comments

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?