Adding empty value on foreign key

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

@@ -13,6 +13,11 @@ export const ForeignKeyWidget = (props: WidgetProps) => {
     id: props.value != null ? props.value : undefined
   });
 
+  const empty_option: BaseRecord = {
+    id: null
+  }
+  empty_option[labelField] = "(None)"
+
   const [inputValue, setInputValue] = useState<string>("");
   const [selectedValue, setSelectedValue] = useState(valueResult.data?.data || null);
   const [debouncedInputValue, setDebouncedInputValue] = useState<string>(inputValue);
@@ -31,10 +36,6 @@ export const ForeignKeyWidget = (props: WidgetProps) => {
 
   const options = listResult.data?.data || [];
   if (! props.required) {
-    const empty_option: BaseRecord = {
-      id: null
-    }
-    empty_option[labelField] = "(None)"
     options.unshift(empty_option);
   }
   const isLoading = listResult.isLoading || valueResult.isLoading;
@@ -47,7 +48,7 @@ export const ForeignKeyWidget = (props: WidgetProps) => {
     <Autocomplete
       value={selectedValue}
       onChange={(event, newValue) => {
-        setSelectedValue(newValue);
+        setSelectedValue(newValue ? newValue : empty_option);
         props.onChange(newValue ? newValue.id : null);
         return true;
       }}