nextui

nextui copied to clipboard

NextUI Version

2.2.9

Describe the bug

When using the input component with file type, I observed that on the first click to choose a file, the selected file is logged as "undefined" in the console. However, on the second attempt, the correct file information is logged

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Click the "Choose File" button to open the file dialog. On the first click, notice that the selected file is logged as "undefined" in the console. On the second click, the correct file information is logged.

Expected behavior

The file input value should be cleared consistently on each click to ensure that the correct file information is logged on the first attempt.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/95061742/e210cb3e-c389-49ec-99b6-469d68d7a86b

Operating System Version

windows 11

Browser

Edge

Same here, any solutions?

I am experiencing the same issue. For now, I am using a regular input element and styled it the same.

Same issue in 2.2.10

same issue in v2.3.6

This seems to be an issue since value="" is set on the input element that NextUI creates. It looks like value="" is assumed to be the default which isn't true for inputs with type=file. In use-input.ts, an empty string is always assumed to be the default value an input should be.

If I force value to be null, the file input works as expected:

<Input
    {...rest}
    // @ts-expect-error -- Known issue with NextUI's Input component
    defaultValue={null}
    multiple={allowMultiple}
    onChange={handleChange}
    type="file"
    // @ts-expect-error -- Known issue with NextUI's Input component
    value={null}
/>

Don't actually do the above in production, it does give a warning that values should not be null, they should be undefined for uncontrolled components. This is just to demonstrate that the empty string appears to be the issue.

There are some related tickets to this issue in the issue tracker:

• https://github.com/nextui-org/nextui/issues/2965
• https://github.com/nextui-org/nextui/issues/2397