Placeholder not rendered

[bicycleghost]

The placeholder text is not showing when rendered unless a file is chose and then removed.

To Reproduce Steps to reproduce the behavior:

1. Use MuiFileInput with a placeholder prop
2. Load the page
3. Only the clip icon is showing

Usage (with react-hook-form):

<Controller
   control={ control }
   name="profilePicture"
   render={ ({ field, fieldState }) => (
       <MuiFileInput
           label="Profile Picture"
           placeholder="Choose an image"
           { ...field }
           helperText={ fieldState.error ? "File is invalid" : "" }
           error={ !!fieldState.error }
           inputProps={{ accept: ".png, .jpg, .png, .jpeg" }}
           fullWidth
       />
   )}
/>

Expected behavior I would expect the placeholder text to be showing at all times if no file is choose.

Screenshots

Desktop:

• OS: Windows 11
• Browser: Chrome
• Version: 116.0.5845.96

[viclafouch]

Hello !

Please share a codesandbox repro, without React Hook Form

[bicycleghost]

I cannot seem to reproduce the errorr in codesanbox. It seems like my setup is the problem, but I have no idea what might be causing it. The issue persists even without react-form-hook.

Also, didn't mean to close the issue (:

[bicycleghost]

I found the issue, it was because I initialized file as undefined instead of null. That seems to solve the issue.

[marcveens]

I found the issue, it was because I initialized file as undefined instead of null. That seems to solve the issue.

This was also an issue I ran into. Shouldn't the placeholder show regardless of file being null or undefined?