theodorusclarence / rhf-input Goto Github PK

Hello,

Thanks for your work. There is a bug related to react-select, in order to avoid this error:

""" starts """

react-dom.development.js?61bb:67 Warning: Prop id did not match. Server: "react-select-11-input" Client: "react-select-2-input"
at input
at div
at AutosizeInput (webpack-internal:///./node_modules/react-input-autosize/lib/AutosizeInput.js:78:3)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at Input (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:1287:25)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at ValueContainer (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:912:24)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at Control (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:1174:24)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at SelectContainer (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:880:24)
at Select (webpack-internal:///./node_modules/react-select/dist/Select-dbb12e54.esm.js:1176:87)
at StateManager (webpack-internal:///./node_modules/react-select/dist/stateManager-845a3300.esm.js:38:89)
at Controller (webpack-internal:///./node_modules/react-hook-form/dist/index.esm.js:227:37)
at div
at div
at ReactSelect (webpack-internal:///./components/ReactSelect.jsx:28:23)
at div
at section
at ReactSelectSection
at form
at FormProvider (webpack-internal:///./node_modules/react-hook-form/dist/index.esm.js:87:147)
at div
at div
at main
at InputsPage (webpack-internal:///./pages/myform.jsx:49:73)
at MyApp (webpack-internal:///./pages/_app.js:23:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)

"" end """

If we add this line to ReactSelect.jsx component, it works fine,

--starts--
<Controller
name={id}
isClearable
defaultValue={
defaultValue ? { value: defaultValue, label: defaultValue } : ''
}
control={control}
rules={validation}
render={({ field }) => {
const styles = errors[id] ? errorStyles : customStyles;
return (
<Select
id={id} ==== I also moved this line here ======
instanceId={id} ======= This line makes it work without problem ===
{...field}
isMulti
isDisabled={disabled}
placeholder={placeholder}
options={optionsObject}
styles={styles}
/>
);
}}
/>

• ends -

so to recap :

<Select
id={id}
instanceId={id}

Yours, Marc

By any change can we see the code of the multi step wizard?
Its not in the repo have been trying for ages to get it to work, is the source available somewhere?
Kind regards.

Also some installation instructions would be nice, I have no idea how to integrate your components with my app based on the documentation. Kind regards