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.

Author: taneliang

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(() => {