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:
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
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user