Component doesn't render as expected

[UltimateUnicorn]

Describe the bug The component doesn't render as expected :

• When no file is selected the label for the field stays (far) above the field -> see screenshot
• When a file is selected the "clear" icon isn't displayed though the underlying button does

To Reproduce Steps to reproduce the behavior:

1. Set-up a new Next.js project : npx create-next-app@latest
2. Copy the author's example into a new page
3. Run the project

Expected behavior I believe the component should render / behave identical to the examples provided on the project's website.

Screenshots This screenshot illustrates the first issue : no file is selected but the "File" label stay far above the component, though it should be "inside" the selection field.

This one illustrates the second issue : when a file is selected the "clear" icon is not displayed, though the button is rendered (not visible on the screenshot)

There are no issues when checking out the author's website

Content of my package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.13",
    "@mui/icons-material": "^5.15.21",
    "@mui/material": "^5.15.21",
    "@mui/material-nextjs": "^5.15.11",
    "@mui/x-data-grid": "^7.8.0",
    "dayjs": "^1.11.11",
    "jspdf": "^2.5.1",
    "mui-file-input": "^4.0.4",
    "next": "latest",
    "next-auth": "^5.0.0-beta.4",
    "react": "latest",
    "react-dom": "latest",
    "react-hook-form": "^7.52.1"
  },
  "devDependencies": {
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "typescript": "latest"
  }
}

Desktop :

• OS: ArchLinux - 6.9.2-arch-1
• Firefox 126.0 64 bits

[viclafouch]

Hello !

Could you please provide a codesandbox for repro ?

[UltimateUnicorn]

Hi Victor ! I've pushed my project to GitHub and imported it into codesandbox. Here is the https://codesandbox.io/p/github/UltimateUnicorn/sogeco1/main

On the left you'll find a navigation drawer with, at its bottom, a link called "mfi". It lead to a page where the issues I mentionned are being visible.

I believe both you and I are, and therefore speak, french, but keeping going in english might help a couple other people ?

[UltimateUnicorn]

Hi Victor ! A couple remarks :

• When I use the codesandbox you provide the link for in the documentation for your component I face the issue with the clear icon not being displayed.
• In my project, if I manually set the "clearIconButtonProps" with the "ClearIcon" from MUI then the icon shows up properly. I understood that I shouldn't need to set this prop for a default icon to show up. Was I mistaken ?

[viclafouch]

I can't access to your codesandbox :/ Looks like it's private

[UltimateUnicorn]

Hi. Sorry for that. I've updated the visibility of my repo and the link in the previous comment as well. Thanks for your help.