-
Notifications
You must be signed in to change notification settings - Fork 94
fix: clear input value on clearFiles from imperative handle #3090
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
| const handleClearFiles = (): void => fileInputRef.current?.clearFiles() | ||
| const handleClearFiles = (): void => { | ||
| fileInputRef.current?.clearFiles() | ||
| setFiles(null) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Per #3089 (comment) I was going to leave slightly more suggestions, but after a bit of thought, nothing I suggest here will actually relieve the code smells we have. The only suggestion I'll make, to help us make clear that this example code is managing its own state in an attempt to mirror what is going on internally in the FileInput component, is to pull this null into a named constant, e.g.:
| setFiles(null) | |
| setFiles(INITIAL_FILES) |
|
|
||
| export const WithRefAndCustomHandlers = { | ||
| render: (argTypes: StorybookArguments): JSX.Element => { | ||
| const [files, setFiles] = useState<FileList | null>(null) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const [files, setFiles] = useState<FileList | null>(null) | |
| const INITIAL_FILES = null | |
| const [files, setFiles] = useState<FileList | null>(INITIAL_FILES) |
Summary
A simple change that clears the input elements value in a file input component when the files state is cleared through the imperative handle.
First PR so any feedback would be greatly appreciated. Thanks!
Closes #3089
How To Test