ambitious-aqua
ambitious-aqua9mo ago

Problem with using Autocomplete MUI

There are no errors when using Inferencer. As soon as I create the page, an error occurs.
No description
No description
No description
4 Replies
kapa.ai
kapa.ai9mo ago
Hi @andrey.va. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, Inferencer is a tool in the refine ecosystem that helps developers quickly generate CRUD (create, read, update, delete) pages for their data model. It analyzes your data model based on the resource scheme and automatically creates the pages with the required forms and tables for CRUD operations. If you're encountering errors, it might be due to how you're using Inferencer. Here are some general usage examples for different components: For Ant Design:
import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter } from "react-router-dom";
import { AntdInferencer } from "@refinedev/inferencer/antd";

const App = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route path="/samples" element={<AntdInferencer />} />
</Routes>
</Refine>
</BrowserRouter>
);
};
import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter } from "react-router-dom";
import { AntdInferencer } from "@refinedev/inferencer/antd";

const App = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route path="/samples" element={<AntdInferencer />} />
</Routes>
</Refine>
</BrowserRouter>
);
};
Source (https://refine.dev/docs/api-reference/antd/components/inferencer/) For Mantine:
import { Layout, Global } from "@refinedev/mantine";
import { MantineProvider, LightTheme } from "@mantine/core";

import { MantineInferencer } from "@refinedev/inferencer/mantine";

const App = () => {
return (
<MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<BrowserRouter>
<Refine
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
path="/samples"
element={<MantineInferencer />}
/>
</Routes>
</Refine>
</BrowserRouter>
</MantineProvider>
);
};
import { Layout, Global } from "@refinedev/mantine";
import { MantineProvider, LightTheme } from "@mantine/core";

import { MantineInferencer } from "@refinedev/inferencer/mantine";

const App = () => {
return (
<MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<BrowserRouter>
<Refine
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
path="/samples"
element={<MantineInferencer />}
/>
</Routes>
</Refine>
</BrowserRouter>
</MantineProvider>
);
};
Source (https://refine.dev/docs/api-reference/mantine/components/inferencer/) If you're still encountering issues, I recommend checking out the Inferencer documentation (https://refine.dev/docs/packages/documentation/inferencer/) for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@1070696361474920509> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aqua9mo ago
const { autocompleteProps: organizationAutocompleteProps } =
useAutocomplete({
resource: "organizations",
defaultValue: usersData?.organization_id,
});
const { autocompleteProps: organizationAutocompleteProps } =
useAutocomplete({
resource: "organizations",
defaultValue: usersData?.organization_id,
});
<Controller
control={control}
name="organization_id"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...organizationAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value?.id ?? value);
}}
getOptionLabel={(item) => {
return (
organizationAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
(item?.id ?? item)?.toString(),
)?.title ?? ""
);
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() ===
(value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label={translate(
"users.fields.organization_id",
)}
margin="normal"
variant="outlined"
/>
)}
/>
)}
/>
<Controller
control={control}
name="organization_id"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...organizationAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value?.id ?? value);
}}
getOptionLabel={(item) => {
return (
organizationAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
(item?.id ?? item)?.toString(),
)?.title ?? ""
);
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() ===
(value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label={translate(
"users.fields.organization_id",
)}
margin="normal"
variant="outlined"
/>
)}
/>
)}
/>
extended-salmon
extended-salmon9mo ago
Hey @andrey.va, Can you provide an reproducable codesandbox, please? Also, you can checkout our Material UI examples to find the differences.