diff --git a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx index de52a560976fcd..22b85ee17490e3 100644 --- a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx +++ b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx @@ -462,7 +462,10 @@ export function DraggableTabBar({ isEditing={editingTabKey === tab.key} setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)} onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)} - tabKey={tab.key} + isSelected={ + (tabListState && tabListState?.selectedKey === tab.key) || + (!tabListState && tab.key === initialTabKey) + } /> {/* If tablistState isn't initialized, we want to load the elipsis menu for the initial tab, that way it won't load in a second later diff --git a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx index 9ebbb643f7125c..d503023f81200c 100644 --- a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx +++ b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx @@ -1,29 +1,27 @@ -import {useContext, useEffect, useMemo, useRef, useState} from 'react'; +import {useEffect, useMemo, useRef, useState} from 'react'; import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; import {motion} from 'framer-motion'; import {GrowingInput} from 'sentry/components/growingInput'; -import {TabsContext} from 'sentry/components/tabs'; import {Tooltip} from 'sentry/components/tooltip'; interface EditableTabTitleProps { isEditing: boolean; + isSelected: boolean; label: string; onChange: (newLabel: string) => void; setIsEditing: (isEditing: boolean) => void; - tabKey: string; } function EditableTabTitle({ label, onChange, isEditing, - tabKey, + isSelected, setIsEditing, }: EditableTabTitleProps) { const [inputValue, setInputValue] = useState(label); - const {tabListState} = useContext(TabsContext); useEffect(() => { setInputValue(label); @@ -33,8 +31,6 @@ function EditableTabTitle({ const inputRef = useRef(null); const isEmpty = !inputValue.trim(); - const isSelected = tabListState?.selectedKey === tabKey; - const memoizedStyles = useMemo(() => { return {fontWeight: isSelected ? theme.fontWeightBold : theme.fontWeightNormal}; }, [isSelected, theme.fontWeightBold, theme.fontWeightNormal]);