Update error message

mui · Oct 12, 2023 · eda23ff · eda23ff
1 parent e96d389
commit eda23ff
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
@@ -1273,7 +1273,9 @@ describe('<Select />', () => {
 
       expect(() => {
         setProps({ value: undefined });
-      }).toErrorDev('MUI: useControllableReducer is changing a controlled prop to be uncontrolled');
+      }).toErrorDev(
+        'MUI: A component is changing the controlled state of the "selectedValues" prop in useSelect to be uncontrolled',
+      );
     });
 
     it('should warn when switching between uncontrolled to controlled', () => {
@@ -1287,7 +1289,7 @@ describe('<Select />', () => {
       expect(() => {
         setProps({ value: 1 });
       }).toErrorDev(
-        'MUI: useControllableReducer is changing an uncontrolled prop to be controlled',
+        'MUI: A component is changing the uncontrolled state of the "selectedValues" prop in useSelect to be controlled',
       );
     });
   });

diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
@@ -289,6 +289,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     getItemAsString: stringifyOption,
     selectionMode: multiple ? 'multiple' : 'single',
     stateReducer: selectReducer,
+    name: 'useSelect',
   };
 
   const {

diff --git a/packages/mui-base/src/utils/useControllableReducer.ts b/packages/mui-base/src/utils/useControllableReducer.ts
@@ -154,6 +154,7 @@ export function useControllableReducer<
     stateComparers = EMPTY_OBJECT,
     onStateChange = NOOP,
     actionContext,
+    name,
   } = parameters;
 
   const controlledPropsRef = React.useRef(controlledProps);
@@ -166,21 +167,23 @@ export function useControllableReducer<
           (controlledPropsRef.current as Record<string, unknown>)[key] !== undefined &&
           (controlledProps as Record<string, unknown>)[key] === undefined
         ) {
-          console.error(
-            'MUI: useControllableReducer is changing a controlled prop to be uncontrolled',
-          );
+          console.error([
+            `MUI: A component is changing the controlled state of the "${key}" prop in ${name} to be uncontrolled`,
+            'Elements should not switch from uncontrolled to controlled (or vice versa).',
+          ]);
         }
 
         if (
           (controlledPropsRef.current as Record<string, unknown>)[key] === undefined &&
           (controlledProps as Record<string, unknown>)[key] !== undefined
         ) {
-          console.error(
-            'MUI: useControllableReducer is changing an uncontrolled prop to be controlled',
-          );
+          console.error([
+            `MUI: A component is changing the uncontrolled state of the "${key}" prop in ${name} to be controlled`,
+            'Elements should not switch from uncontrolled to controlled (or vice versa).',
+          ]);
         }
       });
-    }, [controlledProps]);
+    }, [controlledProps, name]);
   }
 
   // The reducer that is passed to React.useReducer is wrapped with a function that augments the state with controlled values.