Bug: File accept attribute not working on mui and chakra-ui.

CHANGELOG.md

@@ -20,6 +20,11 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/utils
 
 - switch `lodash.isEqualWith` to `fast-equals.createCustomEqual` providing `areFunctionsEqual` assuming any functions are equal.
+- Fixed issue with file accept attribute, fixing [#4404](https://github.com/rjsf-team/react-jsonschema-form/issues/4404).
+
+## @rjsf/mui
+
+- Fixed issue with file accept attribute, fixing [#4404](https://github.com/rjsf-team/react-jsonschema-form/issues/4404).
 
 # 5.24.1
 

packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -53,16 +53,8 @@ export default function BaseInputTemplate<
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
-  const { step, min, max, ...rest } = inputProps;
-  const otherProps = {
-    inputProps: {
-      step,
-      min,
-      max,
-      ...(schema.examples ? { list: examplesId<T>(id) } : undefined),
-    },
-    ...rest,
-  };
+  const { step, min, max, accept, ...rest } = inputProps;
+  const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId<T>(id) } : undefined) };
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
@@ -84,7 +76,10 @@ export default function BaseInputTemplate<
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}
-        {...otherProps}
+        slotProps={{
+          htmlInput: htmlInputProps,
+        }}
+        {...rest}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
         onChange={onChangeOverride || _onChange}

packages/utils/src/getInputProps.ts

@@ -51,5 +51,9 @@ export default function getInputProps<
     inputProps.autoComplete = options.autocomplete;
   }
 
+  if (options.accept) {
+    inputProps.accept = options.accept as string;
+  }
+
   return inputProps;
 }

packages/utils/src/types.ts

@@ -150,6 +150,8 @@ export type InputPropsType = Omit<RangeSpecType, 'step'> & {
   step?: number | 'any';
   /** Specifies the `autoComplete` value for an <input> element */
   autoComplete?: HTMLInputElement['autocomplete'];
+  /** Specifies a filter for what file types the user can upload. */
+  accept?: HTMLInputElement['accept'];
 };
 
 /** Type describing an id used for a field in the `IdSchema` */

packages/utils/test/getInputProps.test.ts

@@ -1,16 +1,23 @@
-import { getInputProps, RJSFSchema } from '../src';
+import { getInputProps, RJSFSchema, UIOptionsType } from '../src';
 
 describe('getInputProps', () => {
   it('returns type=text when no other data is passed', () => {
     expect(getInputProps({})).toEqual({ type: 'text' });
   });
   it('returns type and autoComplete from options when provided', () => {
-    const options = { inputType: 'password', autocomplete: 'on' };
+    const options: UIOptionsType = { inputType: 'password', autocomplete: 'on' };
     expect(getInputProps({}, 'text', options)).toEqual({
       type: options.inputType,
       autoComplete: options.autocomplete,
     });
   });
+  it('returns type and accept from options when provided', () => {
+    const options: UIOptionsType = { accept: '.pdf' };
+    expect(getInputProps({}, 'file', options)).toEqual({
+      type: 'file',
+      accept: options.accept,
+    });
+  });
   it('returns type=defaultType even when schema has type', () => {
     const schema: RJSFSchema = {
       type: 'number',