Fully functional implementation of the foreignKey

gui/app/src/common/crud/widgets/crud-text-widget.tsx

@@ -1,8 +1,7 @@
 import TextWidget from "@rjsf/core/lib/components/widgets/TextWidget";
-import {FormContextType, getTemplate, RJSFSchema, StrictRJSFSchema, WidgetProps} from "@rjsf/utils";
-
-import {ForeignKeyWidget} from "./foreign-key";
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils";
 
+import { ForeignKeyWidget } from "./foreign-key";
 
 export default function CrudTextWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>

gui/app/src/common/crud/widgets/foreign-key.tsx

@@ -1,45 +1,55 @@
-import { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';
-import validator from '@rjsf/validator-ajv8';
-import {Autocomplete, AutocompleteRenderInputParams, debounce} from "@mui/material";
-import {useAutocomplete} from "@refinedev/mui";
-import { Controller } from "react-hook-form";
-import {useState, useEffect, useCallback} from "react";
+import { WidgetProps } from '@rjsf/utils';
+import { Autocomplete } from "@mui/material";
+import { useState, useEffect } from "react";
 import TextField from "@mui/material/TextField";
-import {axiosInstance} from "@refinedev/simple-rest";
-import {useList} from "@refinedev/core";
+import { useList, useOne } from "@refinedev/core";
 
 export const ForeignKeyWidget = (props: WidgetProps) => {
-  const [inputValue, setInputValue] = useState("");
-  const [selectedValue, setSelectedValue] = useState<string | null>(null);
-  const [debouncedInputValue, setDebouncedInputValue] = useState(inputValue);
-
   const resource = props.schema.foreign_key.reference.resource
+  const labelField = props.schema.foreign_key.reference.label
+
+  const valueResult = useOne({
+    resource: resource,
+    id: props.value
+  });
+
+  const [inputValue, setInputValue] = useState<string>("");
+  const [selectedValue, setSelectedValue] = useState(valueResult.data?.data || null);
+  const [debouncedInputValue, setDebouncedInputValue] = useState<string>(inputValue);
 
   useEffect(() => {
     const handler = setTimeout(() => setDebouncedInputValue(inputValue), 300); // Adjust debounce delay as needed
     return () => clearTimeout(handler);
   }, [inputValue]);
 
-  const { data, isLoading } = useList({
+  const listResult = useList({
     resource: resource,
     pagination: { current: 1, pageSize: 10 },
     filters: [{ field: "name", operator: "contains", value: debouncedInputValue }],
     sorters: [{ field: "name", order: "asc" }],
   });
 
-  const options = data?.data || [];
+  const options = listResult.data?.data || [];
+  const isLoading = listResult.isLoading || valueResult.isLoading;
+
+  if(! selectedValue && valueResult.data) {
+    setSelectedValue(valueResult.data?.data)
+  }
 
   return (
     <Autocomplete
       value={selectedValue}
-      onChange={(event, newValue) => setSelectedValue(newValue)}
-      inputValue={inputValue}
+      onChange={(event, newValue) => {
+        setSelectedValue(newValue)
+        props.onChange(newValue ? newValue.id : "")
+      }}
+      //inputValue={inputValue}
       onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
       options={options}
-      getOptionLabel={(option) => option.name}
+      getOptionLabel={(option) => option ? option[labelField] : ""}
       loading={isLoading}
       renderInput={(params) => (
-        <TextField {...params} label="Search" variant="outlined" />
+        <TextField {...params} label={ props.label } variant="outlined" />
       )}
     />
   );

gui/app/src/providers/data-provider.tsx

@@ -55,7 +55,7 @@ export const dataProvider: DataProvider = {
 
     if (filters && filters.length > 0) {
       filters.forEach((filter) => {
-        if ("field" in filter && filter.value.length > 0 && filter.operator === "contains") {
+        if ("field" in filter && filter.value && filter.operator === "contains") {
           params.append(filter.field + "__like", "%" + filter.value + "%");
         }
       });