Merge pull request #22272 from overleaf/rd-tag-dropdown-fix

[web] Tag dropdown menu should not be dismissed when hovering outside of it

GitOrigin-RevId: 0f0f903e07d657752e3476b9abea643bae65eb9e
This commit is contained in:
Rebeka Dekany
2024-12-05 15:19:02 +01:00
committed by Copybot
parent dfea9dacab
commit 1363045db2
2 changed files with 17 additions and 11 deletions

View File

@@ -78,11 +78,10 @@ export default function TagsList() {
<Dropdown align="end" className="tag-menu">
<DropdownToggle
aria-label={t('open_action_menu', { name: tag.name })}
id={`${tag._id}-dropdown-toggle`}
data-testid="tag-dropdown-toggle"
>
<span className="caret" />
</DropdownToggle>
/>
<DropdownMenu className="dropdown-menu-sm-width">
<DropdownItem
as="li"

View File

@@ -255,7 +255,7 @@
width: 100%;
font-weight: normal;
text-align: left;
color: var(--white);
color: var(--content-primary-dark);
background-color: transparent;
border-radius: unset;
border: none;
@@ -292,10 +292,10 @@
> button {
background-color: var(--neutral-90);
font-weight: 700;
color: var(--white);
color: var(--content-primary-dark);
.subdued {
color: var(--white);
color: var(--content-primary-dark);
}
}
}
@@ -309,9 +309,16 @@
}
> li.tag {
&.active,
&:focus-within {
.tag-menu {
display: block;
}
}
&.active {
.tag-menu > button {
color: var(--white);
color: var(--content-primary-dark);
border-color: var(--white);
&:hover {
@@ -370,7 +377,7 @@
border: 1px solid var(--white);
border-radius: var(--border-radius-base);
background-color: transparent;
color: var(--white);
color: var(--content-primary-dark);
display: flex;
align-items: center;
justify-content: center;
@@ -405,7 +412,7 @@
font-weight: normal;
&:hover {
color: var(--white);
color: var(--content-primary-dark);
background-color: var(--bg-accent-01);
}
@@ -845,7 +852,7 @@ form.project-search {
.color-picker-item-icon {
margin: 3px; // it's centered, no matching spacing variable
color: var(--white);
color: var(--content-primary-dark);
font-weight: bold;
}
@@ -856,7 +863,7 @@ form.project-search {
.color-picker-item-icon {
margin: 5px; // it's centered, no matching spacing variable
color: var(--white);
color: var(--content-primary-dark);
}
}
}