Docs - Show example with a WrappedSelect (for lack of a better term)

[react-hook-form]

Docs - Show example with a WrappedSelect (for lack of a better term)

[bluebill1049]

thanks for your feedback @shoeman22 i will update the example as yours :)

[bluebill1049]

          <section>
            <label>MUI Select (wrapped)</label>
            <RHFInput
              as={<WrappedSelect name="test" />}
              name="WrappedSelect"
              register={register}
              setValue={setValue}
            />
          </section>

have you try the above?

[shoeman22]

Yep, that looks like that approach would work as well for the value itself, but the other props aren't going to be sent down.

[bluebill1049]

what do you mean other props?

<section>
            <label>React Select</label>
            <RHFInput
              as={<ReactSelect />}
              options={options}
              name="ReactSelect"
              {...methods}
              isClearable // you can pass props here as well
            />
</section>

[shoeman22]

What I'd initially done was something like this:

// alternately, it could've been thought of as:
// const WrappedSelect = (propsFromRHFInputThatWereIgnored) => (
const WrappedSelect = () => (
  <Select>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
);

return (
  <RHFInput
     as={<WrappedSelect />}
     name="CountryId"
     register={register}
     setValue={setValue}
     variant="outlined"
     margin="normal" // bunch of material-ui Select props
  />
);

And I couldn't figure out why variant, margin, value, etc. weren't getting applied to the Select (material-ui was complaining about trying to set the value to undefined on the Select). The problem was if you use a wrapper, RHFInput is actually cloning the wrapper element (WrappedSelect) and it is getting the props passed down to it. So you need to forward those props that are coming in to the real Select element in that case by passing the props down:

const WrappedSelect = (propsFromRHFInputImNowForwarding) => (
  <Select {...propsFromRHFInputImNowForwarding}>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
);

[bluebill1049]

sorry for the late reply. i do spread rest of the props to the as component

return React.cloneElement(as, {
      ...(onChangeEvent
        ? {
            [onChangeName || 'onChange']: eventWrapper(
              onChangeEvent,
              'onChange',
            ),
          }
        : { onChange: handleChange }),
      ...(isOnBlur
        ? onBlurEvent
          ? { [onBlurName || 'onBlur']: eventWrapper(onBlurEvent, 'onBlur') }
          : { onBlur: handleBlur }
        : {}),
      value: value || inputValue,
      ...(isCheckbox ? { checked: inputValue } : {}),
      ...rest,
    });

i am going to close this issue now, feel free to leave more questions and suggestions tho. 👍