-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Usage in react-hook-form. Ref issue #3855
Comments
So I think the problem is that react-hook-form expects form controls to implement imperative APIs that react-select doesn't conform to. Happy to explore further with @bluebill1049 whether supporting using both libraries together is possible, and which changes to either project may be required, but out of the box right now I don't think they're compatible. |
Thanks @chdorter for raising an issue here and trying out react-hook-form ❤️ as today, if you are using @JedWatson Yea, that would be super nice ✌🏻 to make it work with |
You're welcome 🙂 I think to make it work out of the box, I'm not sure the best place for this code to go but it sounds like we could create a wrapper for
That doesn't solve |
WOW this is such a great idea~! I never thought about creating a wrapper around! thanks, @JedWatson I think I can create a generic component for this.
Need to figure out a good name for that generic component. This is going to solve a lot of problems! You are super smart ❤️✨ going to give a try tonight or over the weekend :) |
OK working version based on @JedWatson 's wonderful idea! https://codesandbox.io/s/goofy-flower-rzu9s
usage:
|
You fellas have gone above and beyond expectations! Much appreciate the time and depth you've put into your responses. The combination of these two, TS and hooks works extremely well so keep up the amazing work! |
Hey @chdorter, I have been working on this new wrapper component last night. https://github.com/react-hook-form/react-hook-form-input Going to polish it up over the weekend, we can close the gap between controlled component with react hook form. |
@chdorter how did you go with this issue? I think RHFInput should solve your problem. |
@bluebill1049 Gave it a quick test locally with react-select and works super neat out of the box. Again, much appreciate the effort you both have gone to in investigating and implementing a solution. |
awesome thanks @chdorter for the update! <3 |
@JedWatson @bluebill1049 awesome, I managed to have Question: is it possible to reshape the value of the controlled components flowing in/out the form values? My typical use case:
What happens?
I hope it was clear. But it's something I typically have to deal with with extra logic in/out. |
@damianobarbati one way I can think of doing it is building a wrapper on top of |
I was trying something like that. Here what I did so far: // init form
const { register, control, handleSubmit, errors, watch } = useForm({
mode: 'onBlur',
reValidateMode: 'onChange',
nativeValidation: false,
defaultValues: {
// topics: [{ label: '#food', value: 1 }], <= this works
// topics: [1, 2], <= this does not work
},
});
// later in the render, please note I have to give defaultValue here for my custom select to work
<SelectMulti name={'topics'} control={control} options={{ 1: '#food', 2: '#fitness', 3: '#fashion', 4: '#tech', 5: '#travel', 6: '#music', 7: '#video' }} defaultValue={[2]} /> Custom select: // you can pass defaultValue=[1,2,3]
const SelectMulti = ({ label, name, options, control, defaultValue, ...props }) => {
// convert options from {a:1} to [{label=a,value=1}]
const optionsComputed = [];
for (const [value, label] of Object.entries(options))
optionsComputed.push({ label, value });
let defaultValueComputed;
// convert defaultValue from [1] to [{label=a,value=1}]
if (defaultValue) {
defaultValueComputed = [];
for (const value of defaultValue)
defaultValueComputed.push(optionsComputed.find(option => option.value == value));
}
return (
<label>
<span>{label}</span>
<Controller
name={name}
defaultValue={defaultValueComputed}
as={Select}
options={optionsComputed}
isMulti={true}
isClearable={true}
control={control}
{...props}
/>
</label>
);
}; Problem is:
Any idea? 🤔 |
@damianobarbati have you seen this example: https://codesandbox.io/s/react-hook-form-controller-079xx |
Sure! I started right from there and thanks for it @bluebill1049, it saved my made day. Here a simplified fork just with the react-select: https://codesandbox.io/s/react-hook-form-controller-71v6w?file=/src/index.js I'm doing an extra mile trying to have leaner data-struct in/out of form. EDIT: EDIT: |
Hi all, Thank you everyone who had a part in addressing this question! In an effort to sustain the However, if you feel this issue is still relevant and you'd like us to review it, or have any suggestions regarding this going forward - please leave a comment and we'll do our best to get back to you! |
Hi @bladey and @JedWatson , I'd like to suggest reopening because this issue is still relevant. An attempt to use import { useForm } from 'react-hook-form';
import Select from 'react-select'
function Component() {
const { register } = useForm();
return (
<Select {...register('country')} />
); Throws the following error:
I suggest that we should have a look at this so that |
Please use Controller, react-select is a controlled component. you can find an example in the doc as well: https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5 |
@bluebill1049 I managed to get it work. It considerably more boilerplate than the The only issue with the following code (trying to be minimalistic) is that the <Controller
control={control}
name="country"
onChange={onCountryChange} /* << ----- This one does not get called ----- */
render={({ field: { onChange, value, ref }}) => (
<Select
inputRef={ref}
value={options(c => { return value == c.value; })}
onChange={val => onChange(val.value)}
options={options}
/>
)}
/> |
I'm trying to use react-select inside a react-hook-form and everything connects up nicely up until I want to change my value and submit the form.
The traditional react select box works fine but implementing the same in react-select looks like there's an issue with passing react-hook-form's register into ref.
Below is in example of a react-select field named "fruit_new" and the traditional select named "fruit_old"
The "fruit_new" field isn't being registered with the form
https://mfi92.csb.app/
Thanks!
The text was updated successfully, but these errors were encountered: