From 259224536cc636ae9f25e082d58c8d3a893297b8 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Thu, 3 Sep 2020 12:06:25 +0800 Subject: [PATCH] Fix bug preventing the same file from being imported twice Bug: suppose we have a file which causes the profiler to display an error when imported. Importing the file once causes the error to be displayed correctly. However, if the file is imported a second time, the error is not displayed again. This happens because we listen to the `input` element's `onChange` event. Selecting the same file a second time does not cause the element's value to change, so the `handleFiles` callback is not called. This commit fixes this bug by emptying the `input` element's `value` in `handleFiles`. This bug is also present in the React DevTools Profiler. --- .../src/ImportButton.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.js b/packages/react-devtools-scheduling-profiler/src/ImportButton.js index 8c7fc0aec911..cc376e6ec07b 100644 --- a/packages/react-devtools-scheduling-profiler/src/ImportButton.js +++ b/packages/react-devtools-scheduling-profiler/src/ImportButton.js @@ -32,7 +32,11 @@ export default function ImportButton({onDataImported}: Props) { const handleFiles = useCallback(async () => { const input = inputRef.current; - if (input !== null && input.files.length > 0) { + if (input === null) { + return; + } + + if (input.files.length > 0) { try { const readFile = await readInputData(input.files[0]); const events: TimelineEvent[] = JSON.parse(readFile); @@ -54,6 +58,9 @@ export default function ImportButton({onDataImported}: Props) { }); } } + + // Reset input element to allow the same file to be re-imported + input.value = ''; }, [onDataImported, modalDialogDispatch]); const uploadData = useCallback(() => {