From 82ec77d2dac9764d44417a4e486a099f89b5e39c Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sun, 15 Dec 2024 15:31:45 +0100
Subject: [PATCH] fix: icon picker keyboard interactions (#1666)

---
 .../icons/picker/icon-picker.module.css       |  3 +
 .../components/icons/picker/icon-picker.tsx   | 64 +++++++++++--------
 2 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 apps/nextjs/src/components/icons/picker/icon-picker.module.css

diff --git a/apps/nextjs/src/components/icons/picker/icon-picker.module.css b/apps/nextjs/src/components/icons/picker/icon-picker.module.css
new file mode 100644
index 000000000..aa52af4b0
--- /dev/null
+++ b/apps/nextjs/src/components/icons/picker/icon-picker.module.css
@@ -0,0 +1,3 @@
+[data-combobox-selected="true"] .iconCard {
+  border-color: var(--mantine-primary-color-6);
+}
diff --git a/apps/nextjs/src/components/icons/picker/icon-picker.tsx b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
index 16797c5aa..432142dbf 100644
--- a/apps/nextjs/src/components/icons/picker/icon-picker.tsx
+++ b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
@@ -20,6 +20,8 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import classes from "./icon-picker.module.css";
+
 interface IconPickerProps {
   initialValue?: string;
   onChange: (iconUrl: string) => void;
@@ -49,35 +51,43 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
   const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
   const groups = data?.icons.map((group) => {
     const options = group.icons.map((item) => (
-      <UnstyledButton
-        onClick={() => {
-          const value = item.url;
-          startTransition(() => {
-            setValue(value);
-            setPreviewUrl(value);
-            setSearch(value);
-            onChange(value);
-            combobox.closeDropdown();
-          });
-        }}
+      <Combobox.Option
         key={item.id}
+        value={item.url}
+        p={0}
+        h="calc(2*var(--mantine-spacing-sm)+25px)"
+        w="calc(2*var(--mantine-spacing-sm)+25px)"
       >
-        <Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
-          <Card
-            p="sm"
-            pos="relative"
-            style={{
-              overflow: "visible",
-              cursor: "pointer",
-            }}
-            withBorder
-          >
-            <Box w={25} h={25}>
-              <Image src={item.url} w={25} h={25} radius="md" />
-            </Box>
-          </Card>
-        </Indicator>
-      </UnstyledButton>
+        <UnstyledButton
+          onClick={() => {
+            const value = item.url;
+            startTransition(() => {
+              setValue(value);
+              setPreviewUrl(value);
+              setSearch(value);
+              onChange(value);
+              combobox.closeDropdown();
+            });
+          }}
+        >
+          <Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
+            <Card
+              p="sm"
+              pos="relative"
+              style={{
+                overflow: "visible",
+                cursor: "pointer",
+              }}
+              className={classes.iconCard}
+              withBorder
+            >
+              <Box w={25} h={25}>
+                <Image src={item.url} w={25} h={25} radius="md" />
+              </Box>
+            </Card>
+          </Indicator>
+        </UnstyledButton>
+      </Combobox.Option>
     ));
 
     return (