diff --git a/src/Components/Selector/Selector.less b/src/Components/Selector/Selector.less index c1c3499b..90f697c2 100644 --- a/src/Components/Selector/Selector.less +++ b/src/Components/Selector/Selector.less @@ -47,6 +47,7 @@ .dropdown { position: absolute; + z-index: 2; border: 1px solid #e4e4e4; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); background-color: var(--search-selector); diff --git a/src/Components/TagListItem/TagListItem.tsx b/src/Components/TagListItem/TagListItem.tsx index f1ae8849..01d0291d 100644 --- a/src/Components/TagListItem/TagListItem.tsx +++ b/src/Components/TagListItem/TagListItem.tsx @@ -1,4 +1,4 @@ -import React, { useState, FC } from "react"; +import React, { useState, FC, useEffect, useRef } from "react"; import flatten from "lodash/flatten"; import { Button } from "@skbkontur/react-ui/components/Button"; import OkIcon from "@skbkontur/react-icons/Ok"; @@ -123,6 +123,10 @@ export const TagListItem: FC = ({ const [deleteTag] = useDeleteTagMutation(); const { name, subscriptions, triggers } = tagStat; + const itemRef = useRef(null); + + const isLastTag = tags[tags.length - 1] === name; + const hasSubscriptions = subscriptions.length !== 0; const handleSubscriptionClick = ( @@ -155,8 +159,19 @@ export const TagListItem: FC = ({ ? SUBSCRIPTION_LIST_HEIGHT : getTotalItemSize(subscriptionContactsCount); + // if last tag in the list has subs, open the subs list and scroll to the center, cause on Mac OS there is now visual difference and scroll bar only shows up when explicitly move mouse on the list + useEffect(() => { + if (isActive && isLastTag && hasSubscriptions && itemRef.current) { + itemRef.current.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + } + }, [isActive]); + return (
{ if (root !== null) { ReactDOM.render( - ( - - )} - > - + + Toast.push(error.toString())} + fallback={() => } + > - - + + , root );