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
This commit is contained in:
Kasper Fabricius Kristensen authored and GitHub committed 2024-10-17 06:56:08 +00:00
1 parent 06536e7655
commit 6a6fd6ee4c
2 files changed
+19 -3

No files matched your search

@@ -256,14 +256,30 @@ const ComboboxImpl = <T extends Value = string>(
)} )}
<div className="relative flex size-full items-center"> <div className="relative flex size-full items-center">
{showSelected && ( {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"> <Text size="small" leading="compact">
{t("general.selected")} {t("general.selected")}
</Text> </Text>
</div> </div>
)} )}
{hideInput && ( {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"> <Text size="small" leading="compact" className="truncate">
{selectedLabel} {selectedLabel}
</Text> </Text>
@@ -73,7 +73,7 @@ const FocusModalContent = React.forwardRef<
<FocusModalPrimitives.Content <FocusModalPrimitives.Content
ref={ref} ref={ref}
className={clx( 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", "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 className
)} )}