Make sure user input is not overridden by export suggested filename

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

 import { Button, CardActions, Input } from '@hypothesis/frontend-shared';
-import { useRef } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 
 import { downloadJSONFile } from '../../../shared/download-json-file';
 import { withServices } from '../../service-context';
@@ -15,8 +15,6 @@ export type ExportAnnotationsProps = {
   toastMessenger: ToastMessengerService;
 };
 
-// TODO: does the Input need a label?
-
 /**
  * Render content for "export" tab panel: allow user to export annotations
  * with a specified filename.
@@ -32,7 +30,11 @@ function ExportAnnotations({
   const exportCount = exportableAnnotations.length;
   const draftCount = store.countDrafts();
 
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const defaultFilename = useMemo(
+    () => suggestedFilename({ groupName: group?.name }),
+    [group],
+  );
+  const [customFilename, setCustomFilename] = useState<string>();
 
   if (!exportReady) {
     return <LoadingSpinner />;
@@ -42,7 +44,7 @@ function ExportAnnotations({
     e.preventDefault();
 
     try {
-      const filename = `${inputRef.current!.value}.json`;
+      const filename = `${customFilename ?? defaultFilename}.json`;
       const exportData = annotationsExporter.buildExportContent(
         exportableAnnotations,
       );
@@ -75,8 +77,11 @@ function ExportAnnotations({
           <Input
             data-testid="export-filename"
             id="export-filename"
-            defaultValue={suggestedFilename({ groupName: group?.name })}
-            elementRef={inputRef}
+            defaultValue={defaultFilename}
+            value={customFilename}
+            onChange={e =>
+              setCustomFilename((e.target as HTMLInputElement).value)
+            }
             required
             maxLength={250}
           />

src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js

@@ -135,9 +135,12 @@ describe('ExportAnnotations', () => {
 
     it('downloads a file using user-entered filename appended with `.json`', () => {
       const wrapper = createComponent();
+      const filenameInput = wrapper.find(
+        'input[data-testid="export-filename"]',
+      );
 
-      wrapper.find('input[data-testid="export-filename"]').getDOMNode().value =
-        'my-filename';
+      filenameInput.getDOMNode().value = 'my-filename';
+      filenameInput.simulate('change');
 
       submitExportForm(wrapper);