Skip to content
This repository has been archived by the owner on Feb 13, 2023. It is now read-only.

Usage with redux-form #84

Open
djfdev opened this issue Jan 19, 2018 · 0 comments
Open

Usage with redux-form #84

djfdev opened this issue Jan 19, 2018 · 0 comments

Comments

@djfdev
Copy link

djfdev commented Jan 19, 2018

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant