question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React-Select onChange() event not fired in v6

See original GitHub issue

Describe the bug When trying to hook to the onChange event of the react-select library, the passed onChange prop does not fire. The same code works in 5.7.0, but not in 6.0.4 To Reproduce

  1. Create a Controller with react-select and add an onChange prop
  2. Change the value in the select. The value is changed in the select and everything works as expected when submitted, but the onChange prop is ignored.

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-w-react-select-z7x1v?file=/src/App.tsx

Expected behavior The passed onChange function is called

Screenshots n/a

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Firefox
  • Version 78.0.2

Additional context Works in react-hook-form 5.7.2, but not in 6.0.4

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
jpodprocommented, Jan 26, 2021

@sparkian15 you should be able to do what i’m showing above. you just need to call the hook form onChange with the event and then you can do whatever else you want in the handler:

<Controller
  control={control}
  name="date"
  render={props => (
    <DatePicker 
      value={props.value}
      onChange={e => {
        props.onChange(e);
        yourCustomCodeHere();
      }} 
    />)
  }                   
/>
2reactions
mmvcodecommented, Jul 14, 2020

Ok, thanks. It works with render

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-select does not "fire" the `onChange` handler
I pass the ref from useCloseOnClickOutside to an outer div of Select in order to catch the bubble events. The handleChange callback that...
Read more >
[Solved]-React select onChange is not working-Reactjs
onChange takes a function. You are passing it changeDataType() , which is running the function changeDataType function, and setting onChange to it's return ......
Read more >
React Select Dropdown onChange Event Handler Tutorial
We'll help you learn how to build a select dropdown list. Also how to attach the onChange event handler to the select dropdown...
Read more >
Controller | React Hook Form - Simple React forms validation
This simplifies integrating with external controlled components with non-standard prop names. Provides onChange , onBlur , name , ref and value to the...
Read more >
Portals - React
An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found