From ce6e37e269b062885c131bcf621e922d644f11bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 17 May 2024 11:23:53 +0100
Subject: [PATCH] feat: Replace `Select` with `Autocomplete` in
 `FileUploadAndLabel` component (#2993)

Co-authored-by: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
---
 .../FileUploadAndLabel/Public.test.tsx        | 243 +++++-----
 .../components/FileUploadAndLabel/Public.tsx  |   7 +-
 .../FileUploadAndLabel/SelectMultiple.tsx     | 416 +++++++++++-------
 .../PrivateFileUpload/UploadedFileCard.tsx    |   4 +-
 editor.planx.uk/src/theme.ts                  |   8 +
 editor.planx.uk/src/ui/shared/Checkbox.tsx    |  18 +-
 6 files changed, 411 insertions(+), 285 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
index 0f69f50d9c..a8a8435fd8 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
@@ -1,10 +1,4 @@
-import {
-  act,
-  fireEvent,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
+import { act, screen, waitFor, within } from "@testing-library/react";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import axios from "axios";
 import { vanillaStore } from "pages/FlowEditor/lib/store";
@@ -27,7 +21,7 @@ window.URL.createObjectURL = jest.fn();
 
 describe("Basic state and setup", () => {
   test("renders correctly", async () => {
-    setup(
+    const { getAllByRole, getByTestId, getByText } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -38,13 +32,13 @@ describe("Basic state and setup", () => {
       />,
     );
 
-    expect(screen.getAllByRole("heading")[0]).toHaveTextContent("Test title");
+    expect(getAllByRole("heading")[0]).toHaveTextContent("Test title");
 
     // Required file is listed
-    expect(screen.getByText("testKey")).toBeVisible();
+    expect(getByText("testKey")).toBeVisible();
 
     // Drop zone is available
-    expect(screen.getByTestId("upload-input")).toBeInTheDocument();
+    expect(getByTestId("upload-input")).toBeInTheDocument();
   });
 
   it("should not have any accessibility violations", async () => {
@@ -65,7 +59,7 @@ describe("Basic state and setup", () => {
   });
 
   test("shows help buttons for header and applicable file", async () => {
-    setup(
+    const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={mockFileTypesUniqueKeys}
@@ -73,12 +67,12 @@ describe("Basic state and setup", () => {
       />,
     );
 
-    const helpButtons = screen.getAllByTestId("more-info-button");
+    const helpButtons = getAllByTestId("more-info-button");
     expect(helpButtons).toHaveLength(1);
   });
 
   it("does not show optional files if there are other types", () => {
-    setup(
+    const { queryByRole } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -89,28 +83,24 @@ describe("Basic state and setup", () => {
       />,
     );
 
-    expect(
-      screen.queryByRole("heading", { name: /Optional files/ }),
-    ).toBeNull();
+    expect(queryByRole("heading", { name: /Optional files/ })).toBeNull();
   });
 
   it("shows optional files if there are no other types", () => {
-    setup(
+    const { getByRole } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[mockFileTypes.NotRequired]}
       />,
     );
 
-    expect(
-      screen.getByRole("heading", { name: /Optional files/ }),
-    ).toBeVisible();
+    expect(getByRole("heading", { name: /Optional files/ })).toBeVisible();
   });
 });
 
 describe("Info-only mode with hidden drop zone", () => {
   test("renders correctly", async () => {
-    setup(
+    const { getAllByRole, queryByTestId, getByText } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -122,13 +112,13 @@ describe("Info-only mode with hidden drop zone", () => {
       />,
     );
 
-    expect(screen.getAllByRole("heading")[0]).toHaveTextContent("Test title");
+    expect(getAllByRole("heading")[0]).toHaveTextContent("Test title");
 
     // Required file is listed
-    expect(screen.getByText("testKey")).toBeVisible();
+    expect(getByText("testKey")).toBeVisible();
 
     // Drop zone is not available
-    expect(screen.queryByTestId("upload-input")).not.toBeInTheDocument();
+    expect(queryByTestId("upload-input")).not.toBeInTheDocument();
   });
 
   it("should not have any accessibility violations", async () => {
@@ -150,7 +140,7 @@ describe("Info-only mode with hidden drop zone", () => {
   });
 
   test("shows help buttons for header and applicable file", async () => {
-    setup(
+    const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={mockFileTypesUniqueKeys}
@@ -159,12 +149,12 @@ describe("Info-only mode with hidden drop zone", () => {
       />,
     );
 
-    const helpButtons = screen.getAllByTestId("more-info-button");
+    const helpButtons = getAllByTestId("more-info-button");
     expect(helpButtons).toHaveLength(1);
   });
 
   it("shows optional files by default", () => {
-    setup(
+    const { queryByRole } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -176,9 +166,7 @@ describe("Info-only mode with hidden drop zone", () => {
       />,
     );
 
-    expect(
-      screen.queryByRole("heading", { name: /Optional files/ }),
-    ).toBeVisible();
+    expect(queryByRole("heading", { name: /Optional files/ })).toBeVisible();
   });
 });
 
@@ -205,7 +193,7 @@ describe("Modal trigger", () => {
   });
 
   test("Modal opens when a single file is uploaded", async () => {
-    const { user } = setup(
+    const { getByTestId, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -223,7 +211,7 @@ describe("Modal trigger", () => {
     });
 
     const file = new File(["test"], "test.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, file);
     expect(mockedPost).toHaveBeenCalled();
 
@@ -236,7 +224,7 @@ describe("Modal trigger", () => {
   });
 
   test("Modal opens when multiple files are uploaded", async () => {
-    const { user } = setup(
+    const { getByTestId, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -265,7 +253,7 @@ describe("Modal trigger", () => {
 
     const file1 = new File(["test1"], "test1.png", { type: "image/png" });
     const file2 = new File(["test2"], "test2.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, [file1, file2]);
     expect(mockedPost).toHaveBeenCalledTimes(2);
 
@@ -281,7 +269,7 @@ describe("Modal trigger", () => {
   });
 
   test("Modal does not open when a file is deleted", async () => {
-    const { user } = setup(
+    const { getByTestId, getByLabelText, queryByText, getByText, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -311,7 +299,7 @@ describe("Modal trigger", () => {
 
     const file1 = new File(["test1"], "test1.png", { type: "image/png" });
     const file2 = new File(["test2"], "test2.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, [file1, file2]);
 
     const fileTaggingModal = await within(document.body).findByTestId(
@@ -323,15 +311,15 @@ describe("Modal trigger", () => {
     await waitFor(() => expect(fileTaggingModal).not.toBeVisible());
 
     // Uploaded files displayed as cards
-    expect(screen.getByText("test1.png")).toBeVisible();
-    expect(screen.getByText("test2.png")).toBeVisible();
+    expect(getByText("test1.png")).toBeVisible();
+    expect(getByText("test2.png")).toBeVisible();
 
     // Delete the second file
-    user.click(screen.getByLabelText("Delete test2.png"));
+    user.click(getByLabelText("Delete test2.png"));
 
     // Card removed from screen
     await waitFor(() =>
-      expect(screen.queryByText("test2.png")).not.toBeInTheDocument(),
+      expect(queryByText("test2.png")).not.toBeInTheDocument(),
     );
 
     // Modal not open
@@ -342,7 +330,15 @@ describe("Modal trigger", () => {
 describe("Adding tags and syncing state", () => {
   test("Can continue when all required file types are uploaded and tagged", async () => {
     const handleSubmit = jest.fn();
-    const { user } = setup(
+    const {
+      getAllByRole,
+      getAllByTestId,
+      getByRole,
+      getByTestId,
+      getByText,
+      queryByRole,
+      user,
+    } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         handleSubmit={handleSubmit}
@@ -351,7 +347,7 @@ describe("Adding tags and syncing state", () => {
     );
 
     // No file requirements have been satisfied yet
-    let incompleteIcons = screen.getAllByTestId("incomplete-icon");
+    let incompleteIcons = getAllByTestId("incomplete-icon");
     expect(incompleteIcons).toHaveLength(2);
 
     // Upload one file
@@ -363,7 +359,7 @@ describe("Adding tags and syncing state", () => {
     });
 
     const file1 = new File(["test1"], "test1.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, [file1]);
 
     // Modal opened automatically
@@ -371,41 +367,59 @@ describe("Adding tags and syncing state", () => {
       "file-tagging-dialog",
     );
 
-    // The number of selects in the modal matches the number of uploaded files
-    const selects = await within(document.body).findAllByTestId("select");
-    expect(selects).toHaveLength(1);
+    // The number of autocompletes in the modal matches the number of uploaded files
+    const autocompleteInputs = getAllByRole("combobox", {
+      name: /What does this file show/,
+    });
+    expect(autocompleteInputs).toHaveLength(1);
 
-    const submitModalButton = await within(fileTaggingModal).findByText("Done");
+    const submitModalButton = getByRole("button", { name: /Done/ });
     expect(submitModalButton).toBeVisible();
 
-    // Apply multiple tags to this file
-    fireEvent.change(selects[0], { target: { value: "Roof plan" } });
+    // Autocomplete is close, option unavailable
+    let roofPlanOption = queryByRole("option", { name: /Roof plan/ });
+    expect(roofPlanOption).toBeNull();
 
-    // Close modal successfully
-    user.click(submitModalButton);
-    await waitFor(() => expect(fileTaggingModal).not.toBeVisible());
+    // Open dropdown
+    await user.click(autocompleteInputs[0]);
+    roofPlanOption = getByRole("option", { name: /Roof plan/ });
+    expect(roofPlanOption).toBeVisible();
+
+    // Apply tag to this file
+    await user.click(roofPlanOption);
+
+    // Close modal
+    await user.click(submitModalButton);
+    expect(fileTaggingModal).not.toBeVisible();
 
     // Uploaded file displayed as card with chip tags
-    expect(screen.getByText("test1.png")).toBeVisible();
-    const chips = screen.getAllByTestId("uploaded-file-chip");
+    expect(getByText("test1.png")).toBeVisible();
+    const chips = getAllByTestId("uploaded-file-chip");
     expect(chips).toHaveLength(1);
     expect(chips[0]).toHaveTextContent("Roof plan");
 
     // Requirements list reflects successfully tagged uploads
-    const completeIcons = screen.getAllByTestId("complete-icon");
+    const completeIcons = getAllByTestId("complete-icon");
     expect(completeIcons).toHaveLength(1);
-    incompleteIcons = screen.getAllByTestId("incomplete-icon");
+    incompleteIcons = getAllByTestId("incomplete-icon");
     expect(incompleteIcons).toHaveLength(1);
 
     // "Continue" onto to the next node
-    expect(screen.getByText("Continue")).toBeEnabled();
-    await user.click(screen.getByText("Continue"));
+    expect(getByText("Continue")).toBeEnabled();
+    await user.click(getByText("Continue"));
     expect(handleSubmit).toHaveBeenCalledTimes(1);
   });
 
   test("Cannot continue when only an optional file type is uploaded and tagged", async () => {
     const handleSubmit = jest.fn();
-    const { user } = setup(
+    const {
+      getAllByRole,
+      getAllByTestId,
+      getByTestId,
+      getByRole,
+      getByText,
+      user,
+    } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         handleSubmit={handleSubmit}
@@ -414,7 +428,7 @@ describe("Adding tags and syncing state", () => {
     );
 
     // No file requirements have been satisfied yet
-    let incompleteIcons = screen.getAllByTestId("incomplete-icon");
+    let incompleteIcons = getAllByTestId("incomplete-icon");
     expect(incompleteIcons).toHaveLength(2);
 
     // Upload one file
@@ -426,7 +440,7 @@ describe("Adding tags and syncing state", () => {
     });
 
     const file1 = new File(["test1"], "test1.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, [file1]);
 
     // Modal opened automatically
@@ -434,32 +448,42 @@ describe("Adding tags and syncing state", () => {
       "file-tagging-dialog",
     );
 
-    // The number of selects in the modal matches the number of uploaded files
-    const selects = await within(document.body).findAllByTestId("select");
-    expect(selects).toHaveLength(1);
+    // The number of autocompletes in the modal matches the number of uploaded files
+    const autocompleteInputs = getAllByRole("combobox", {
+      name: /What does this file show/,
+    });
+    expect(autocompleteInputs).toHaveLength(1);
 
     // Apply multiple tags to this file
-    fireEvent.change(selects[0], { target: { value: "Heritage statement" } });
+    await user.click(autocompleteInputs[0]);
+    const heritageStatementOption = getByRole("option", {
+      name: /Heritage statement/,
+    });
+    expect(heritageStatementOption).toBeVisible();
+
+    // Apply tag to this file, and close autocomplete dropdown
+    await user.click(heritageStatementOption);
+    await user.keyboard("{Esc}");
 
     // Close modal
     await user.keyboard("{Esc}");
     await waitFor(() => expect(fileTaggingModal).not.toBeVisible());
 
     // Uploaded file displayed as card with chip tags
-    expect(screen.getByText("test1.png")).toBeVisible();
-    const chips = screen.getAllByTestId("uploaded-file-chip");
+    expect(getByText("test1.png")).toBeVisible();
+    const chips = getAllByTestId("uploaded-file-chip");
     expect(chips).toHaveLength(1);
     expect(chips[0]).toHaveTextContent("Heritage statement");
 
     // Requirements list reflects successfully tagged uploads
-    const completeIcons = screen.getAllByTestId("complete-icon");
+    const completeIcons = getAllByTestId("complete-icon");
     expect(completeIcons).toHaveLength(1);
-    incompleteIcons = screen.getAllByTestId("incomplete-icon");
+    incompleteIcons = getAllByTestId("incomplete-icon");
     expect(incompleteIcons).toHaveLength(1);
 
     // Show error when attempting to "Continue" onto to the next node
-    expect(screen.getByText("Continue")).toBeEnabled();
-    await user.click(screen.getByText("Continue"));
+    expect(getByText("Continue")).toBeEnabled();
+    await user.click(getByText("Continue"));
     expect(handleSubmit).toHaveBeenCalledTimes(0);
     const error = await within(document.body).findByText(
       "Please upload and label all required files",
@@ -472,7 +496,7 @@ describe("Error handling", () => {
   test("An error is thrown if a user does not upload any files", async () => {
     const handleSubmit = jest.fn();
 
-    const { user } = setup(
+    const { getByTestId, getByRole, findByText, user } = setup(
       <FileUploadAndLabelComponent
         handleSubmit={handleSubmit}
         title="Test title"
@@ -492,14 +516,14 @@ describe("Error handling", () => {
     });
 
     const file = new File(["test"], "test.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
 
     // User cannot submit without uploading a file
-    await user.click(screen.getByTestId("continue-button"));
+    await user.click(getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
 
     // Error warns user of this
-    const dropzoneError = await screen.findByText("Upload at least one file");
+    const dropzoneError = await findByText("Upload at least one file");
     expect(dropzoneError).toBeVisible();
 
     await user.upload(input, file);
@@ -512,20 +536,20 @@ describe("Error handling", () => {
     // Error message is cleared
     expect(dropzoneError).toBeEmptyDOMElement();
 
-    const deleteButton = screen.getByRole("button", { name: /Delete/ });
+    const deleteButton = getByRole("button", { name: /Delete/ });
     await user.click(deleteButton);
 
     // Error message does not immediately re-appear
     expect(dropzoneError).toBeEmptyDOMElement();
 
     // Error appears again after user attempt to submit without files
-    await user.click(screen.getByTestId("continue-button"));
+    await user.click(getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
     expect(dropzoneError).toBeVisible();
   });
 
   test("An error is thrown in the modal if a user does not tag all files", async () => {
-    const { user } = setup(
+    const { getByTestId, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         fileTypes={[
@@ -544,7 +568,7 @@ describe("Error handling", () => {
     });
 
     const file = new File(["test"], "test.jpg", { type: "image/jpg" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, file);
 
     const fileTaggingModal = await within(document.body).findByTestId(
@@ -565,15 +589,11 @@ describe("Error handling", () => {
   test("An error is thrown in the main component if a user does not tag all files", async () => {
     const handleSubmit = jest.fn();
 
-    const { user } = setup(
+    const { getAllByRole, getByTestId, getByRole, findByText, user } = setup(
       <FileUploadAndLabelComponent
         handleSubmit={handleSubmit}
         title="Test title"
-        fileTypes={[
-          mockFileTypes.AlwaysRequired,
-          mockFileTypes.AlwaysRecommended,
-          mockFileTypes.NotRequired,
-        ]}
+        fileTypes={mockFileTypesUniqueKeys}
       />,
     );
 
@@ -585,29 +605,38 @@ describe("Error handling", () => {
     });
 
     const file = new File(["test"], "test.jpg", { type: "image/jpg" });
-    const input = screen.getByTestId("upload-input");
+    const input = getByTestId("upload-input");
     await user.upload(input, file);
 
     // Exit modal without tagging
     await user.keyboard("{Esc}");
 
     // User cannot submit without uploading a file
-    await user.click(screen.getByTestId("continue-button"));
+    await user.click(getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
-    const fileListError = await screen.findByText(
-      /File test.jpg is not labeled/,
-    );
+    const fileListError = await findByText(/File test.jpg is not labeled/);
     expect(fileListError).toBeVisible();
 
     // Re-open modal and tag file
-    await user.click(screen.getByRole("button", { name: /Change/ }));
-    const select = within(document.body).getByTestId("select");
-    fireEvent.change(select, { target: { value: "Utility bill" } });
-    await user.click(screen.getByRole("button", { name: /Done/ }));
+    await user.click(getByRole("button", { name: /Change/ }));
+    const autocompleteInputs = getAllByRole("combobox", {
+      name: /What does this file show/,
+    });
+    expect(autocompleteInputs).toHaveLength(1);
+    await user.click(autocompleteInputs[0]);
+
+    const utilityBillOption = getByRole("option", { name: /Utility bill/ });
+    expect(utilityBillOption).toBeVisible();
+
+    // Apply tag to this file, and close autocomplete dropdown
+    await user.click(utilityBillOption);
+    await user.keyboard("{Esc}");
+
+    await user.click(getByRole("button", { name: /Done/ }));
 
     // Error message is cleared, user can submit
     expect(fileListError).toBeEmptyDOMElement();
-    await user.click(screen.getByTestId("continue-button"));
+    await user.click(getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
   });
 });
@@ -619,7 +648,7 @@ describe("Submitting data", () => {
 
   it("records the user uploaded files", async () => {
     const handleSubmit = jest.fn();
-    const { user } = setup(
+    const { getByText, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         handleSubmit={handleSubmit}
@@ -629,7 +658,7 @@ describe("Submitting data", () => {
 
     await uploadAndTagSingleFile(user);
 
-    await user.click(screen.getByText("Continue"));
+    await user.click(getByText("Continue"));
     expect(handleSubmit).toHaveBeenCalledTimes(1);
 
     const submitted = handleSubmit.mock.calls[0][0];
@@ -647,7 +676,7 @@ describe("Submitting data", () => {
 
   it("records the full file type list presented to the user", async () => {
     const handleSubmit = jest.fn();
-    const { user } = setup(
+    const { getByText, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         handleSubmit={handleSubmit}
@@ -656,7 +685,7 @@ describe("Submitting data", () => {
     );
 
     await uploadAndTagSingleFile(user);
-    await user.click(screen.getByText("Continue"));
+    await user.click(getByText("Continue"));
 
     const submitted = handleSubmit.mock.calls[0][0];
     const requestedFiles = submitted?.data?._requestedFiles;
@@ -720,7 +749,7 @@ describe("Submitting data", () => {
     act(() => setState({ flow, breadcrumbs }));
 
     const handleSubmit = jest.fn();
-    const { user } = setup(
+    const { getByText, user } = setup(
       <FileUploadAndLabelComponent
         title="Test title"
         handleSubmit={handleSubmit}
@@ -729,7 +758,7 @@ describe("Submitting data", () => {
     );
 
     await uploadAndTagSingleFile(user);
-    await user.click(screen.getByText("Continue"));
+    await user.click(getByText("Continue"));
 
     const submitted = handleSubmit.mock.calls[0][0];
     const requestedFiles = submitted?.data?._requestedFiles;
@@ -764,8 +793,14 @@ const uploadAndTagSingleFile = async (user: UserEvent) => {
     "file-tagging-dialog",
   );
 
-  const selects = await within(document.body).findAllByTestId("select");
-  fireEvent.change(selects[0], { target: { value: "Roof plan" } });
+  const autocompleteInputs = screen.getAllByRole("combobox", {
+    name: /What does this file show/,
+  });
+
+  await user.click(autocompleteInputs[0]);
+  const roofPlanOption = screen.getByRole("option", { name: /Roof plan/ });
+  expect(roofPlanOption).toBeVisible();
+  await user.click(roofPlanOption);
 
   const submitModalButton = await within(fileTaggingModal).findByText("Done");
   user.click(submitModalButton);
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
index 7cb91be4df..7d28298ab0 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -257,10 +257,13 @@ function Component(props: Props) {
             )}
             {slots.map((slot) => {
               return (
-                <ErrorWrapper error={fileLabelErrors?.[slot.id]} id={slot.id}>
+                <ErrorWrapper
+                  error={fileLabelErrors?.[slot.id]}
+                  id={slot.id}
+                  key={slot.id}
+                >
                   <UploadedFileCard
                     {...slot}
-                    key={slot.id}
                     tags={getTagsForSlot(slot.id, fileList)}
                     onChange={onUploadedFileCardChange}
                     removeFile={() => removeFile(slot)}
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
index 0d45ef7bdf..66cac4e7ba 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
@@ -1,20 +1,25 @@
 import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
+import Autocomplete, {
+  AutocompleteChangeReason,
+  autocompleteClasses,
+  AutocompleteProps,
+} from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Checkbox from "@mui/material/Checkbox";
-import Chip from "@mui/material/Chip";
 import FormControl from "@mui/material/FormControl";
-import Input from "@mui/material/Input";
-import InputLabel from "@mui/material/InputLabel";
+import { inputLabelClasses } from "@mui/material/InputLabel";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListSubheader from "@mui/material/ListSubheader";
-import MenuItem from "@mui/material/MenuItem";
-import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
 import { styled } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import capitalize from "lodash/capitalize";
-import React, { useEffect, useState } from "react";
-import { usePrevious } from "react-use";
+import React, { forwardRef, PropsWithChildren, useMemo, useState } from "react";
+import { borderedFocusStyle } from "theme";
+import Checkbox from "ui/shared/Checkbox";
 
 import { FileUploadSlot } from "../FileUpload/Public";
 import {
@@ -22,212 +27,285 @@ import {
   FileList,
   getTagsForSlot,
   removeSlots,
+  UserFile,
 } from "./model";
 
-interface SelectMultipleProps extends SelectProps {
+interface SelectMultipleProps {
   uploadedFile: FileUploadSlot;
   fileList: FileList;
   setFileList: (value: React.SetStateAction<FileList>) => void;
 }
 
+interface Option extends UserFile {
+  category: keyof FileList;
+}
+
 const ListHeader = styled(Box)(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
   padding: theme.spacing(1, 1.5),
   background: theme.palette.grey[200],
-  // Offset default padding of MuiList
-  margin: "-8px 0 8px",
 }));
 
-const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
-  top: "16%",
-  textDecoration: "underline",
-  color: theme.palette.link.main,
-  "&[data-shrink=true]": {
-    textDecoration: "none",
-    color: theme.palette.text.primary,
-    top: "0",
-    transform: "translate(14px, -5px) scale(0.85)",
+const StyledAutocomplete = styled(
+  Autocomplete<Option, true, true, false, "div">,
+)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  // Vertically center "large" size caret icon
+  [`& .${autocompleteClasses.endAdornment}`]: {
+    top: "unset",
+  },
+  "&:focus-within": {
+    "& svg": {
+      color: "black",
+    },
   },
 }));
 
-const StyledSelect = styled(Select<string[]>)(({ theme }) => ({
-  border: `1px solid ${theme.palette.border.main}`,
-  background: theme.palette.background.paper,
-  "& > div": {
-    minHeight: "50px",
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  "&:focus-within": {
+    ...borderedFocusStyle,
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
+      border: "1px solid transparent !important",
+    },
+  },
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
+    borderRadius: 0,
+    border: `1px solid${theme.palette.border.main} !important`,
+  },
+  "& fieldset": {
+    borderColor: theme.palette.border.main,
   },
-  "& > div:focus": {
-    background: theme.palette.action.focus,
+  backgroundColor: theme.palette.background.paper,
+  [`& .${outlinedInputClasses.root}, input`]: {
+    cursor: "pointer",
   },
-  "& > svg": {
+  [`& .${inputLabelClasses.root}`]: {
+    textDecoration: "underline",
     color: theme.palette.primary.main,
-    width: "1.25em",
-    height: "1.25em",
-    top: "unset",
+    "&[data-shrink=true]": {
+      textDecoration: "none",
+      color: theme.palette.text.primary,
+      paddingY: 0,
+      transform: "translate(14px, -22px) scale(0.85)",
+    },
   },
 }));
 
+/**
+ * Function which returns the Input component used by Autocomplete
+ */
+const renderInput: AutocompleteProps<
+  Option,
+  true,
+  true,
+  false,
+  "div"
+>["renderInput"] = (params) => (
+  <StyledTextField
+    {...params}
+    InputProps={{
+      ...params.InputProps,
+      notched: false,
+    }}
+    label="What does this file show?"
+  />
+);
+
+/**
+ * Function which returns the groups (ul elements) used by Autocomplete
+ */
+const renderGroup: AutocompleteProps<
+  Option,
+  true,
+  true,
+  false,
+  "div"
+>["renderGroup"] = ({ group, key, children }) => (
+  <List
+    key={`group-${key}`}
+    role="group"
+    sx={{ paddingY: 0 }}
+    aria-labelledby={`${group}-label`}
+  >
+    <ListSubheader
+      id={`${group}-label`}
+      role="presentation"
+      disableSticky
+      sx={(theme) => ({
+        borderTop: 1,
+        borderColor: theme.palette.border.main,
+      })}
+    >
+      <Typography py={1} variant="subtitle2" component="h4">
+        {`${capitalize(group)} files`}
+      </Typography>
+    </ListSubheader>
+    {children}
+  </List>
+);
+
+/**
+ * Function which returns the options (li elements) used by Autocomplete
+ */
+const renderOption: AutocompleteProps<
+  Option,
+  true,
+  true,
+  false,
+  "div"
+>["renderOption"] = (props, option, { selected }) => (
+  <ListItem {...props}>
+    <Checkbox
+      data-testid="select-checkbox"
+      checked={selected}
+      inputProps={{
+        "aria-label": option.name,
+      }}
+    />
+    <ListItemText sx={{ ml: 2 }}>{option.name}</ListItemText>
+  </ListItem>
+);
+
+const PopupIcon = <ArrowIcon sx={{ color: "primary.main" }} fontSize="large" />;
+
+/**
+ * Custom Listbox component
+ * Used to wrap options within the autocomplete and append a custom element above the option list
+ */
+const ListboxComponent = forwardRef<typeof Box, PropsWithChildren>(
+  ({ children, ...props }, ref) => (
+    <>
+      <Box>
+        <ListHeader>
+          <Typography variant="h4" component="h3" pr={3}>
+            Select all that apply
+          </Typography>
+          <Button variant="contained" color="prompt" aria-label="Close list">
+            Done
+          </Button>
+        </ListHeader>
+      </Box>
+      <Box
+        ref={ref}
+        {...props}
+        role="listbox"
+        sx={{ paddingY: "0px !important" }}
+      >
+        {children}
+      </Box>
+    </>
+  ),
+);
+
 export const SelectMultiple = (props: SelectMultipleProps) => {
   const { uploadedFile, fileList, setFileList } = props;
 
   const initialTags = getTagsForSlot(uploadedFile.id, fileList);
-  const [tags, setTags] = useState<string[]>(initialTags);
-  const previousTags = usePrevious(tags) || initialTags;
-  const [open, setOpen] = React.useState(false);
-
-  const handleChange = (event: SelectChangeEvent<typeof tags>) => {
-    const {
-      target: { value },
-    } = event;
-    setTags(
-      // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : value,
-    );
-  };
-  const handleClose = () => setOpen(false);
-  const handleOpen = () => setOpen(true);
 
-  const updateFileListWithTags = (
-    previousTags: string[] | undefined,
-    tags: string[],
+  /**
+   * Options for autocomplete
+   * FileList with appended "category" property for grouping
+   */
+  const options: Option[] = useMemo(
+    () =>
+      (Object.keys(fileList) as Array<keyof typeof fileList>)
+        .filter((fileListCategory) => fileList[fileListCategory].length > 0)
+        .flatMap((category) =>
+          fileList[category].map((fileType) => ({ category, ...fileType })),
+        ),
+    [fileList],
+  );
+
+  /**
+   * Previous values to pre-populate autocomplete
+   */
+  const value: Option[] = useMemo(
+    () =>
+      initialTags.flatMap((tag) => options.filter(({ name }) => name === tag)),
+    [initialTags],
+  );
+
+  /**
+   * Update FileList (from main Public.tsx component) when values are added or removed from Autocomplete
+   */
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    value: Option[],
+    reason: AutocompleteChangeReason,
   ) => {
-    const updatedTags = tags.filter((tag) => !previousTags?.includes(tag));
-    const removedTags = previousTags?.filter((tag) => !tags?.includes(tag));
-
-    if (updatedTags.length > 0) {
-      const updatedFileList = addOrAppendSlots(
-        updatedTags,
-        uploadedFile,
-        fileList,
-      );
-      setFileList(updatedFileList);
-    }
+    const selectedTags = value.map(({ name }) => name);
 
-    if (removedTags && removedTags.length > 0) {
-      const updatedFileList = removeSlots(removedTags, uploadedFile, fileList);
-      setFileList(updatedFileList);
+    switch (reason) {
+      case "selectOption": {
+        const updatedTags = selectedTags.filter(
+          (tag) => !initialTags?.includes(tag),
+        );
+        const updatedFileList = addOrAppendSlots(
+          updatedTags,
+          uploadedFile,
+          fileList,
+        );
+        setFileList(updatedFileList);
+        break;
+      }
+      case "removeOption": {
+        const removedTags = initialTags?.filter(
+          (tag) => !selectedTags?.includes(tag),
+        );
+        const updatedFileList = removeSlots(
+          removedTags,
+          uploadedFile,
+          fileList,
+        );
+        setFileList(updatedFileList);
+        break;
+      }
     }
   };
 
-  useEffect(() => {
-    updateFileListWithTags(previousTags, tags);
-  }, [tags]);
-
   return (
     <FormControl
       key={`form-${uploadedFile.id}`}
       sx={{ display: "flex", flexDirection: "column" }}
     >
-      <StyledInputLabel
-        id={`select-multiple-file-tags-label-${uploadedFile.id}`}
-      >
-        What does this file show?
-      </StyledInputLabel>
-      <StyledSelect
-        native={false}
-        key={`select-${uploadedFile.id}`}
+      <StyledAutocomplete
+        role="status"
+        aria-atomic={true}
+        aria-live="polite"
+        disableClearable
+        disableCloseOnSelect
+        getOptionLabel={(option) => option.name}
+        groupBy={(option) => option.category}
         id={`select-multiple-file-tags-${uploadedFile.id}`}
-        variant="standard"
+        isOptionEqualToValue={(option, value) => option.name === value.name}
+        ListboxComponent={ListboxComponent}
         multiple
-        value={tags}
         onChange={handleChange}
-        open={open}
-        onClose={handleClose}
-        onOpen={handleOpen}
-        IconComponent={ArrowIcon}
-        input={<Input key={`select-input-${uploadedFile.id}`} />}
-        inputProps={{
-          name: uploadedFile.id,
-          "data-testid": "select",
-          "aria-labelledby": `select-multiple-file-tags-label-${uploadedFile.id}`,
+        options={options}
+        popupIcon={PopupIcon}
+        renderGroup={renderGroup}
+        renderInput={renderInput}
+        renderOption={renderOption}
+        value={value}
+        ChipProps={{
+          variant: "uploadedFileTag",
+          size: "small",
+          sx: { pointerEvents: "none" },
+          onDelete: undefined,
         }}
-        renderValue={(selected) => (
-          <Box
-            sx={{
-              display: "flex",
-              flexWrap: "wrap",
-              alignItems: "center",
-              gap: 0.5,
-              padding: "0 0.5em",
-            }}
-          >
-            {selected.map((value) => (
-              <Chip
-                key={`chip-${value}-${uploadedFile.id}`}
-                label={value}
-                variant="uploadedFileTag"
-                size="small"
-                sx={{ pointerEvents: "none" }}
-              />
-            ))}
-          </Box>
-        )}
-        MenuProps={{
-          anchorOrigin: {
-            vertical: "bottom",
-            horizontal: "center",
+        componentsProps={{
+          popupIndicator: {
+            disableRipple: true,
+          },
+          popper: {
+            sx: {
+              boxShadow: 10,
+            },
           },
         }}
-      >
-        <ListSubheader disableGutters>
-          <ListHeader>
-            <Typography variant="h4" component="h3" pr={3}>
-              Select all that apply
-            </Typography>
-            <Button
-              variant="contained"
-              color="prompt"
-              onClick={handleClose}
-              aria-label="Close list"
-            >
-              Done
-            </Button>
-          </ListHeader>
-        </ListSubheader>
-        {(Object.keys(fileList) as Array<keyof typeof fileList>)
-          .filter((fileListCategory) => fileList[fileListCategory].length > 0)
-          .map((fileListCategory) => {
-            return [
-              <ListSubheader
-                key={`subheader-${fileListCategory}-${uploadedFile.id}`}
-                disableSticky
-              >
-                <Typography py={1} variant="subtitle2" component="h4">
-                  {`${capitalize(fileListCategory)} files`}
-                </Typography>
-              </ListSubheader>,
-              ...fileList[fileListCategory].map((fileType) => {
-                return [
-                  <MenuItem
-                    key={`menuitem-${fileType.name}-${uploadedFile.id}`}
-                    value={fileType.name}
-                    data-testid="select-menuitem"
-                    disableRipple
-                    disableTouchRipple
-                  >
-                    <Checkbox
-                      key={`checkbox-${fileType.name}-${uploadedFile.id}`}
-                      checked={tags.indexOf(fileType.name) > -1}
-                      data-testid="select-checkbox"
-                      inputProps={{
-                        "aria-label": `${fileType.name}`,
-                      }}
-                    />
-                    <ListItemText
-                      key={`listitemtext-${fileType.name}-${uploadedFile.id}`}
-                      primary={fileType.name}
-                      id={fileType.name}
-                    />
-                  </MenuItem>,
-                ];
-              }),
-            ];
-          })}
-      </StyledSelect>
+      />
     </FormControl>
   );
 };
diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
index 407b33be1e..283d21b2fd 100644
--- a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
@@ -20,8 +20,8 @@ interface Props extends FileUploadSlot {
 
 const Root = styled(Box)(({ theme }) => ({
   border: `1px solid ${theme.palette.border.main}`,
-  marginBottom: theme.spacing(1),
-  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(5),
 }));
 
 const FileCard = styled(Box)(({ theme }) => ({
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
index d42b363b88..4a52bd0f6e 100644
--- a/editor.planx.uk/src/theme.ts
+++ b/editor.planx.uk/src/theme.ts
@@ -228,6 +228,14 @@ const getThemeOptions = ({
           },
         },
       },
+      MuiPopper: {
+        styleOverrides: {
+          root: {
+            // Override default popover box-shadow to increase visual separation
+            boxShadow: "0 0 10px 4px rgba(0, 0, 0, 0.5) !important",
+          },
+        },
+      },
       MuiContainer: {
         styleOverrides: {
           root: {
diff --git a/editor.planx.uk/src/ui/shared/Checkbox.tsx b/editor.planx.uk/src/ui/shared/Checkbox.tsx
index 285f956b23..297c1115d9 100644
--- a/editor.planx.uk/src/ui/shared/Checkbox.tsx
+++ b/editor.planx.uk/src/ui/shared/Checkbox.tsx
@@ -46,20 +46,22 @@ const Icon = styled("span", {
 export interface Props {
   id?: string;
   checked: boolean;
-  onChange: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onChange?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
 
-export default function Checkbox(props: Props): FCReturn {
+export default function Checkbox({ id, checked, onChange, inputProps }: Props): FCReturn {
   return (
-    <Root onClick={() => props.onChange()}>
+    <Root onClick={() => onChange && onChange()}>
       <Input
-        defaultChecked={props.checked}
+        defaultChecked={checked}
         type="checkbox"
-        id={props.id}
-        data-testid={props.id}
-        onChange={() => props.onChange()}
+        id={id}
+        data-testid={id}
+        onChange={() => onChange && onChange()}
+        {...inputProps}
       />
-      <Icon checked={props.checked} />
+      <Icon checked={checked} />
     </Root>
   );
 }