From 6a6fd6ee4c87a32a96ad8e3f80bd06b7a0ad1610 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 17 Oct 2024 08:56:08 +0200
Subject: [PATCH] fix(dashboard,ui): Fix outline flash on FocusModal (#9624)

**What**
- Fixes an issue where the `outline` would flash on FocusModals when the focus was transferred to the modal.
- Fixes an issue where the selected value of the combobox component was misaligned for single value comboboxes.

Resolves CC-604
---
 .../components/inputs/combobox/combobox.tsx   | 20 +++++++++++++++++--
 .../components/focus-modal/focus-modal.tsx    |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx b/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx
index 6b6709b5de..38414c3287 100644
--- a/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx
+++ b/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx
@@ -256,14 +256,30 @@ const ComboboxImpl = <T extends Value = string>(
         )}
         <div className="relative flex size-full items-center">
           {showSelected && (
-            <div className="pointer-events-none absolute inset-y-0 left-[calc(var(--tag-width)+8px)] flex size-full items-center">
+            <div
+              className={clx(
+                "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                {
+                  "left-[calc(var(--tag-width)+8px)]": showTag,
+                  "left-2": !showTag,
+                }
+              )}
+            >
               <Text size="small" leading="compact">
                 {t("general.selected")}
               </Text>
             </div>
           )}
           {hideInput && (
-            <div className="pointer-events-none absolute inset-y-0 left-[calc(var(--tag-width)+8px)] flex size-full items-center overflow-hidden">
+            <div
+              className={clx(
+                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
+                {
+                  "left-[calc(var(--tag-width)+8px)]": showTag,
+                  "left-2": !showTag,
+                }
+              )}
+            >
               <Text size="small" leading="compact" className="truncate">
                 {selectedLabel}
               </Text>
diff --git a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
index 036c9dc6dc..d00f2225d4 100644
--- a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
+++ b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
@@ -73,7 +73,7 @@ const FocusModalContent = React.forwardRef<
       <FocusModalPrimitives.Content
         ref={ref}
         className={clx(
-          "bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border focus-visible:outline-none",
+          "bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-0 data-[state=closed]:slide-in-from-bottom-2  duration-200",
           className
         )}