From 4c5e3ae959b913b4bbf70d490b050ac4471d3a16 Mon Sep 17 00:00:00 2001
From: christinaroise <christina@roise.no>
Date: Tue, 24 Sep 2024 12:52:19 +0200
Subject: [PATCH] fix onClick for checkbox and lint

---
 studio/components/LanguageSelector.tsx | 82 ++++++++++++++------------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/studio/components/LanguageSelector.tsx b/studio/components/LanguageSelector.tsx
index ff6a394a0..3d85ed4d8 100644
--- a/studio/components/LanguageSelector.tsx
+++ b/studio/components/LanguageSelector.tsx
@@ -1,6 +1,7 @@
-import { Box, Button, Card, Checkbox, Flex, Text, useTheme } from "@sanity/ui";
+import { Box, Button, Card, Checkbox, Flex, useTheme } from "@sanity/ui";
 import React, { useMemo } from "react";
 import { PatchEvent, set } from "sanity";
+
 import {
   Language,
   supportedLanguages,
@@ -68,47 +69,52 @@ const LanguageSelector = ({ value = [], onChange }: LanguageSelectorProps) => {
           : colorMap[themeType].default;
 
         return (
-          <Card
-            key={lang.id}
-            padding={4}
-            radius={2}
-            shadow={1}
-            style={{ cursor: "pointer", backgroundColor }}
-            onClick={() => handleLanguageSelection(lang)}
-          >
-            <Flex align="center" justify="space-between">
-              <Flex align="center">
-                <Checkbox id={lang.id} checked={isSelected} readOnly />
-                <Box flex={1} paddingLeft={3}>
-                  <label htmlFor={lang.id}>
+          <label htmlFor={lang.id}>
+            <Card
+              key={lang.id}
+              padding={4}
+              radius={2}
+              shadow={1}
+              style={{ cursor: "pointer", backgroundColor }}
+            >
+              <Flex align="center" justify="space-between">
+                <Flex align="center">
+                  <Checkbox
+                    id={lang.id}
+                    checked={isSelected}
+                    onClick={() => {
+                      handleLanguageSelection(lang);
+                    }}
+                  />
+                  <Box flex={1} paddingLeft={3}>
                     {lang.icon} {lang.title}
-                  </label>
-                </Box>
+                  </Box>
+                </Flex>
+                {isSelected && (
+                  <Box>
+                    <Button
+                      padding={2}
+                      onClick={(e) => {
+                        e.stopPropagation(); // Prevent triggering card's click handler
+                        handleDefaultSetting(lang);
+                      }}
+                      mode={
+                        currentDefaultLanguage === lang.id ? "default" : "ghost"
+                      }
+                      tone="primary"
+                    >
+                      {currentDefaultLanguage === lang.id
+                        ? "Default"
+                        : "Set as Default"}
+                    </Button>
+                  </Box>
+                )}
               </Flex>
-              {isSelected && (
-                <Box>
-                  <Button
-                    padding={2}
-                    onClick={(e) => {
-                      e.stopPropagation(); // Prevent triggering card's click handler
-                      handleDefaultSetting(lang);
-                    }}
-                    mode={
-                      currentDefaultLanguage === lang.id ? "default" : "ghost"
-                    }
-                    tone="primary"
-                  >
-                    {currentDefaultLanguage === lang.id
-                      ? "Default"
-                      : "Set as Default"}
-                  </Button>
-                </Box>
-              )}
-            </Flex>
-          </Card>
+            </Card>
+          </label>
         );
       }),
-    [value, currentDefaultLanguage, themeType]
+    [value, currentDefaultLanguage, themeType],
   );
 
   return (