diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx index 3dba6419fcb322..f9869c32547d63 100644 --- a/packages/mui-base/src/Select/Select.test.tsx +++ b/packages/mui-base/src/Select/Select.test.tsx @@ -1365,7 +1365,7 @@ describe('', () => { expect(() => { setProps({ value: 1 }); }).toErrorDev( - 'useControllableReducer: The useSelect component is changing an uncontrolled prop to be controlled: selectedValues', + 'useControllableReducer: The Select component is changing an uncontrolled prop to be controlled: selectedValues', ); }); }); diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index e43968bd4eccfc..7b250dd7e733d3 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -144,6 +144,7 @@ const Select = React.forwardRef(function Select< onOpenChange: onListboxOpenChange, getOptionAsString, value: valueProp, + componentName: 'Select', }); const ownerState: SelectOwnerState = { diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts index 7964d0e894128f..abc9d52240fdf5 100644 --- a/packages/mui-base/src/useSelect/useSelect.ts +++ b/packages/mui-base/src/useSelect/useSelect.ts @@ -101,6 +101,7 @@ function useSelect( getOptionAsString = defaultOptionStringifier, getSerializedValue = defaultFormValueProvider, value: valueProp, + componentName = 'useSelect', } = props; const buttonRef = React.useRef(null); @@ -287,7 +288,7 @@ function useSelect( getItemAsString: stringifyOption, selectionMode: multiple ? 'multiple' : 'single', stateReducer: selectReducer, - componentName: 'useSelect', + componentName, }; const { diff --git a/packages/mui-base/src/useSelect/useSelect.types.ts b/packages/mui-base/src/useSelect/useSelect.types.ts index 217bd98c3c00fa..b94883b6350ee8 100644 --- a/packages/mui-base/src/useSelect/useSelect.types.ts +++ b/packages/mui-base/src/useSelect/useSelect.types.ts @@ -123,6 +123,12 @@ export interface UseSelectParameters; + /** + * The name of the component using useSelect. + * For debugging purposes. + * @default 'useSelect' + */ + componentName?: string; } interface UseSelectButtonSlotEventHandlers {