I'm trying to use React-Quill with react-admin v4 (I'm not too happy with the RichTextInput).
While I easily did so on the 'create' page, I struggle with the 'edit' page. Here is the simplified code snippet:
import {
Edit,
SimpleForm,
TextInput,
DateInput,
useInput,
required
} from "react-admin";
import ReactQuill from "react-quill";
import { modules } from "../utils/quillModules";
const QuillInput = ({ source }) => {
const {
field,
} = useInput({ source });
const handleChange = (value: any) => {
field.onChange(value);
};
return (
<>
<ReactQuill
modules={modules}
theme="snow"
value={field.value || ''}
onChange={handleChange}
/>
</>
);
};
export const FindingEdit = () => (
<Edit>
<SimpleForm warnWhenUnsavedChanges>
<QuillInput source="description" />
<DateInput source="dueDate" validate={[required()]} />
</SimpleForm>
</Edit>
);
But loading this page throws the following error, and I not skilled enough to understand how to handle the changes in this custom input:
Cannot call an event handler while rendering.
at ReactQuill2 (http://192.168.1.246:5173/node_modules/.vite/deps/react-quill.js?v=bb4e07ad:71:30)
at QuillInput (http://192.168.1.246:5173/src/findings/FindingEdit.tsx?t=1710145964356:35:23)
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at Grid4 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:3410:24)
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at CardContent2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:28013:17)
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at form
at FormGroupsProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:21750:21)
at FormProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:14927:11)
at LabelPrefixContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:20081:19)
at RecordContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:12717:21)
at OptionalRecordContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:13122:18)
at Form2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:22144:24)
at SimpleForm (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:92591:24)
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at Paper2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:5878:17)
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at Card2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:27688:17)
at div
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at EditView (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:91964:23)
at RecordContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:12717:21)
at SaveContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:12327:21)
at EditContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:13155:21)
at EditBase (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:13181:21)
at Edit (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:92054:3)
at FindingEdit
at RenderedRoute (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:7872:5)
at Routes (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:8194:5)
at ResourceContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19534:21)
at Resource (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19540:22)
at RenderedRoute (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:7872:5)
at Routes (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:8194:5)
at Suspense
at ErrorBoundary2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:4717:35)
at div
at main
at div
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at Layout (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:5109:20)
at div
at RenderedRoute (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:7872:5)
at Routes (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:8194:5)
at CoreAdminRoutes (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19417:3)
at RenderedRoute (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:7872:5)
at Routes (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:8194:5)
at CoreAdminUI (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19481:18)
at div
at http://192.168.1.246:5173/node_modules/.vite/deps/chunk-32VACWTZ.js?v=bb4e07ad:1852:50
at ScopedCssBaseline2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:42102:17)
at AdminUI (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:97133:18)
at ThemeProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:1630:15)
at ThemeProvider2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:1692:15)
at ThemeProvider3 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-ATDQG372.js?v=bb4e07ad:3752:12)
at ThemeProvider2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:2503:23)
at ResourceDefinitionContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19043:15)
at NotificationContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9263:21)
at I18nContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9341:15)
at Router (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:8137:15)
at HistoryRouter2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9763:21)
at InternalRouter (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9803:21)
at BasenameContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9783:21)
at AdminRouter (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9789:20)
at QueryClientProvider2 (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:6901:21)
at PreferencesEditorContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:18959:21)
at StoreContextProvider (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:9151:18)
at CoreAdminContext (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-OTYGDGZT.js?v=bb4e07ad:19070:28)
at AdminContext (http://192.168.1.246:5173/node_modules/.vite/deps/chunk-GDI44AVI.js?v=bb4e07ad:97169:21)
at Admin (http://192.168.1.246:5173/node_modules/.vite/deps/react-admin.js?v=bb4e07ad:3824:28)
at App
I read the official react-admin documentation