fix: apply PRs #7500, #7499, #7491

.changeset/fix-create-modal-cached-data.md

@@ -0,0 +1,11 @@
+---
+"@refinedev/refine-core": patch
+"@refinedev/refine-react-hook-form": patch
+---
+
+fix(core, react-hook-form): prevent cached show-page data from overwriting create modal defaultValues
+
+When opening a create modal on a show page for the same resource, the form's `defaultValues` were overwritten by cached data from the show page's `useOne` query. This happened because `useForm` passed the URL-derived `id` to `useOne` even for create actions, causing a query key collision with the cached entry.
+
+- **core:** Don't pass `id` to `useOne` for create actions, preventing the cache key collision at the source.
+- **react-hook-form:** Guard the `useModalForm` visibility reset effect against create actions.

.changeset/safe-route-id-decoding.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+"@refinedev/react-router": patch
+"@refinedev/remix-router": patch
+---
+
+Safely handle malformed URI-encoded route params when parsing route ids and query targets.

packages/antd/src/components/themedLayout/sider/index.tsx

@@ -5,6 +5,7 @@ import {
   Grid,
   Drawer,
   Button,
+  Tooltip,
   theme,
   ConfigProvider,
 } from "antd";
@@ -82,7 +83,11 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
             <Menu.SubMenu
               key={item.key}
               icon={icon ?? <UnorderedListOutlined />}
-              title={label}
+              title={
+                <Tooltip title={siderCollapsed ? label : undefined}>
+                  {label}
+                </Tooltip>
+              }
             >
               {renderTreeView(children, selectedKey)}
             </Menu.SubMenu>
@@ -109,9 +114,11 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
             style={linkStyle}
           >
-            <Link to={route ?? ""} style={linkStyle}>
-              {label}
-            </Link>
+            <Tooltip title={siderCollapsed ? label : undefined}>
+              <Link to={route ?? ""} style={linkStyle}>
+                {label}
+              </Link>
+            </Tooltip>
             {!siderCollapsed && isSelected && (
               <div className="ant-menu-tree-arrow" />
             )}
@@ -145,7 +152,9 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
       onClick={() => handleLogout()}
       icon={<LogoutOutlined />}
     >
-      {translate("buttons.logout", "Logout")}
+      <Tooltip title={siderCollapsed ? translate("buttons.logout", "Logout") : undefined}>
+        {translate("buttons.logout", "Logout")}
+      </Tooltip>
     </Menu.Item>
   );
 

packages/core/src/definitions/helpers/handleUseParams/index.tsx

@@ -1,8 +1,16 @@
+const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+
 export const handleUseParams = (params: any = {}): any => {
   if (params?.id) {
     return {
       ...params,
-      id: decodeURIComponent(params.id),
+      id: safeDecodeURIComponent(params.id),
     };
   }
   return params;

packages/core/src/hooks/form/index.ts

@@ -156,7 +156,7 @@ export const useForm = <
 
   const queryResult = useOne<TQueryFnData, TError, TData>({
     resource: identifier,
-    id,
+    id: isCreate ? undefined : id,
     queryOptions: {
       // Only enable the query if it's not a create action and the `id` is defined
       ...props.queryOptions,

packages/react-hook-form/src/useModalForm/index.ts

@@ -187,7 +187,7 @@ export const useModalForm = <
 
   // compensate for setting of initial form values in useForm since it doesnt track modal visibility
   React.useEffect(() => {
-    if (!visible || !query?.data?.data) return;
+    if (!visible || !query?.data?.data || action === "create") return;
 
     const formData = query.data.data;
     if (!formData) return;
@@ -197,7 +197,7 @@ export const useModalForm = <
         keepDirtyValues: true,
       }),
     });
-  }, [visible, query?.data?.data, autoResetFormWhenClose]);
+  }, [visible, query?.data?.data, autoResetFormWhenClose, action]);
 
   React.useEffect(() => {
     if (initiallySynced === false && syncWithLocationKey) {

packages/react-hook-form/test/index.tsx

@@ -6,6 +6,7 @@ import {
   type IResourceItem,
   type I18nProvider,
   type IRefineOptions,
+  type RouterProvider,
 } from "@refinedev/core";
 
 import { MockJSONServer, mockRouterProvider } from "./dataMocks";
@@ -15,6 +16,7 @@ interface ITestWrapperProps {
   dataProvider?: DataProvider;
   resources?: IResourceItem[];
   routerInitialEntries?: string[];
+  routerProvider?: RouterProvider;
   i18nProvider?: I18nProvider;
   options?: IRefineOptions;
 }
@@ -25,6 +27,7 @@ export const TestWrapper: (
   dataProvider,
   resources,
   routerInitialEntries,
+  routerProvider,
   i18nProvider,
   options,
 }) => {
@@ -34,12 +37,12 @@ export const TestWrapper: (
         <Refine
           i18nProvider={i18nProvider}
           dataProvider={dataProvider ?? MockJSONServer}
-          routerProvider={mockRouterProvider()}
+          routerProvider={routerProvider ?? mockRouterProvider()}
           resources={resources ?? [{ name: "posts" }]}
           options={{
             ...options,
             reactQuery: {
-              clientConfig: {
+              clientConfig: options?.reactQuery?.clientConfig ?? {
                 defaultOptions: {
                   queries: {
                     retry: false,

packages/react-router/src/bindings.tsx

@@ -17,6 +17,7 @@ import {
   useParams,
 } from "react-router";
 import { convertToNumberIfPossible } from "./convert-to-number-if-possible";
+import { safeDecodeURIComponent } from "./safe-decode-uri-component";
 
 export const stringifyConfig = {
   addQueryPrefix: true,
@@ -124,7 +125,7 @@ export const routerProvider: RouterProvider = {
       const response: ParseResponse = {
         ...(resource && { resource }),
         ...(action && { action }),
-        ...(params?.id && { id: decodeURIComponent(params.id) }),
+        ...(params?.id && { id: safeDecodeURIComponent(params.id) }),
         // ...(params?.action && { action: params.action }), // lets see if there is a need for this
         pathname,
         params: {
@@ -136,7 +137,7 @@ export const routerProvider: RouterProvider = {
             combinedParams.pageSize as string,
           ) as number | undefined,
           to: combinedParams.to
-            ? decodeURIComponent(combinedParams.to as string)
+            ? safeDecodeURIComponent(combinedParams.to as string)
             : undefined,
         },
       };

packages/react-router/src/safe-decode-uri-component.ts

@@ -0,0 +1,7 @@
+export const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};

packages/remix-router/src/bindings.tsx

@@ -11,6 +11,7 @@ import qs from "qs";
 import React, { type ComponentProps, useCallback, useContext } from "react";
 import { paramsFromCurrentPath } from "./params-from-current-path";
 import { convertToNumberIfPossible } from "./convert-to-number-if-possible";
+import { safeDecodeURIComponent } from "./safe-decode-uri-component";
 
 export const stringifyConfig = {
   addQueryPrefix: true,
@@ -116,8 +117,8 @@ export const routerProvider: RouterProvider = {
       const response: ParseResponse = {
         ...(resource && { resource }),
         ...(action && { action }),
-        ...(inferredId && { id: decodeURIComponent(inferredId) }),
-        ...(params?.id && { id: decodeURIComponent(params.id) }),
+        ...(inferredId && { id: safeDecodeURIComponent(inferredId) }),
+        ...(params?.id && { id: safeDecodeURIComponent(params.id) }),
         // ...(params?.action && { action: params.action }), // lets see if there is a need for this
         pathname,
         params: {
@@ -129,7 +130,7 @@ export const routerProvider: RouterProvider = {
             combinedParams.pageSize as string,
           ) as number | undefined,
           to: combinedParams.to
-            ? decodeURIComponent(combinedParams.to as string)
+            ? safeDecodeURIComponent(combinedParams.to as string)
             : undefined,
         },
       };

packages/remix-router/src/safe-decode-uri-component.ts

@@ -0,0 +1,7 @@
+export const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};