Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling onBlur for field using an event object causes value to change #2189

Closed
davegri opened this issue Nov 30, 2016 · 4 comments
Closed

Calling onBlur for field using an event object causes value to change #2189

davegri opened this issue Nov 30, 2016 · 4 comments

Comments

@davegri
Copy link

davegri commented Nov 30, 2016

I've got a form with body field using redux-form.
I've got a mentions component that only renders when form field is focused.
I've omitted redux-form's default onBlur prop from being spread over my Textarea so that when the mentions component is clicked the field does not lose focus. I've replaced this with react-onclickoutside so that the field will only lose focus when a click happens outside the component.

Code: (Only showing relevant stuff)

// Render
<Textarea
  // we are omitting the default redux 'onBlur' and replacing this functionality
  // with this.handleClickOutside, this way we only lose focus when a click happens outside of
  // the form and we don't lose focus when the mentions container is clicked
  {..._.omit(this.props.fields.body, ['onBlur'])}
/>

// provided by 'react-onclickoutside' HOC
handleClickOutside = (evt) => {
  const bodyField = this.props.fields.body
  if (bodyField.active) {
    bodyField.onBlur(evt)
  }
}

Here is the situation:
form is rendered twice (using separate names).
Form A is in focus with value 'VALUE'
a click on form B triggers the handleClickOutside handler on form A
Form A received the value from form B.

From what I can tell onBlur is inspecting the event object and using the target value in it to set the value of the current form, in this case though the target is a different form. What is the point of onBlur changing a forms value? Why is this default behavior? I fixed this by not passing onBlur anything but this seems pretty weird IMO

thoughts?

@davegri davegri changed the title Calling onBlur for field using react-onclickoutside causing weird behavior Calling onBlur for field using an event object causes value to change Nov 30, 2016
@srosset81
Copy link

I have the same problem... Did you find a solution ?

I have a address field using Google Maps' autocomplete API. When an address is selected, I update manually the field value using this.props.input.onChange(). The field value is then an object instead of a string.
Howeer as soon as onBlur is called, redux-form changes back the field value to the string.

It seems very weird that onBlur would change the field value. Definitely not something I would have expected.

@srosset81
Copy link

Looks like this is a known issue: #2768

@gustavohenke
Copy link
Collaborator

Because this issue saw almost no activity for a few months, I'm closing it.

@lock
Copy link

lock bot commented Dec 6, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 6, 2018
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

3 participants