From 520b6c4c4a5701ba2ad0d89f3981c8b4fe2ccada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 29 Apr 2024 15:15:23 +0100
Subject: [PATCH] wip: Test `inputmode="none"` on mobile

---
 .../components/FileUploadAndLabel/SelectMultiple.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
index a445cc018b..f40a1baa20 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
@@ -19,6 +19,7 @@ import Typography from "@mui/material/Typography";
 import capitalize from "lodash/capitalize";
 import React, { forwardRef, PropsWithChildren, useMemo, useState } from "react";
 import { borderedFocusStyle } from "theme";
+import Checkbox from "ui/shared/Checkbox";
 
 import { FileUploadSlot } from "../FileUpload/Public";
 import {
@@ -28,7 +29,6 @@ import {
   removeSlots,
   UserFile,
 } from "./model";
-import Checkbox from "ui/shared/Checkbox";
 
 interface SelectMultipleProps {
   uploadedFile: FileUploadSlot;
@@ -108,6 +108,7 @@ const renderInput: AutocompleteProps<
     InputProps={{
       ...params.InputProps,
       notched: false,
+      inputMode: "none",
     }}
     label="What does this file show?"
   />
@@ -123,7 +124,12 @@ const renderGroup: AutocompleteProps<
   false,
   "div"
 >["renderGroup"] = ({ group, key, children }) => (
-  <List key={`group-${key}`} role="group" sx={{ paddingY: 0 }} aria-labelledby={`${group}-label`}>
+  <List
+    key={`group-${key}`}
+    role="group"
+    sx={{ paddingY: 0 }}
+    aria-labelledby={`${group}-label`}
+  >
     <ListSubheader
       id={`${group}-label`}
       role="presentation"
@@ -156,7 +162,7 @@ const renderOption: AutocompleteProps<
       data-testid="select-checkbox"
       checked={selected}
       inputProps={{
-        "aria-label": option.name
+        "aria-label": option.name,
       }}
     />
     <ListItemText sx={{ ml: 2 }}>{option.name}</ListItemText>