diff --git a/web/src/pages/channels/ChannelsPage.tsx b/web/src/pages/channels/ChannelsPage.tsx index 5bcf7acd7..b56af674d 100644 --- a/web/src/pages/channels/ChannelsPage.tsx +++ b/web/src/pages/channels/ChannelsPage.tsx @@ -66,12 +66,14 @@ export default function ChannelsPage() { event: React.MouseEvent, channel: Channel, ) => { + event.stopPropagation(); setOpen(true); setChannelMenu(channel); setAnchorEl(event.currentTarget); }; - const handleClose = () => { + const handleClose = (e: React.SyntheticEvent) => { + e.stopPropagation(); setOpen(false); }; @@ -151,11 +153,26 @@ export default function ChannelsPage() { 'aria-labelledby': 'channel-options-button', }} > + { + e.stopPropagation(); + }} + > + + + + Edit Channel Settings + { + e.stopPropagation(); + }} > @@ -165,21 +182,15 @@ export default function ChannelsPage() { { + e.stopPropagation(); + }} > Watch Channel - - - - - Edit Channel Settings - { e.stopPropagation(); @@ -235,6 +246,15 @@ export default function ChannelsPage() { ) : ( <> + + e.stopPropagation()} + > + + + - - e.stopPropagation()} - > - - - { diff --git a/web/src/pages/channels/EditChannelPage.tsx b/web/src/pages/channels/EditChannelPage.tsx index 09e6e5210..5fe3597cc 100644 --- a/web/src/pages/channels/EditChannelPage.tsx +++ b/web/src/pages/channels/EditChannelPage.tsx @@ -15,7 +15,7 @@ import { SubmitHandler, useForm, } from 'react-hook-form'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import Breadcrumbs from '../../components/Breadcrumbs.tsx'; import ChannelEpgConfig from '../../components/channel_config/ChannelEpgConfig.tsx'; import { ChannelFlexConfig } from '../../components/channel_config/ChannelFlexConfig.tsx'; @@ -103,6 +103,7 @@ export default function EditChannelPage({ isNew, initialTab }: Props) { const { currentEntity: workingChannel } = useStore((s) => s.channelEditor); const previousChannel = usePrevious(workingChannel); const navigate = useNavigate(); + const location = useLocation(); const [channelEditorState, setChannelEditorState] = useState({ @@ -110,6 +111,23 @@ export default function EditChannelPage({ isNew, initialTab }: Props) { isNewChannel: isNew, }); + function getLastPathSegment(url: string) { + const pathSegments = url.split('/'); + return pathSegments[pathSegments.length - 1]; + } + + // This is a workaround + // Previously when you would navigate to the "Edit" page via the breadcrumb it would stay on the same tab and break future navigation + // see https://github.com/chrisbenincasa/tunarr/issues/466 + useEffect(() => { + const currentPath = location.pathname; + const lastSegment = getLastPathSegment(currentPath); + + if (lastSegment === 'edit' && currentTab !== 'properties') { + setCurrentTab('properties'); + } + }, [location]); + const handleChange = (_: React.SyntheticEvent, newValue: TabValues) => { if (newValue !== currentTab) { setCurrentTab(newValue); diff --git a/web/src/router.tsx b/web/src/router.tsx index 2c6e62c62..c648caebf 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -1,4 +1,5 @@ import { QueryClient } from '@tanstack/react-query'; +import { map } from 'lodash-es'; import { createBrowserRouter } from 'react-router-dom'; import { Root } from './App.tsx'; import { ErrorPage } from './pages/ErrorPage.tsx'; @@ -39,7 +40,6 @@ import { newFillerListLoader, } from './preloaders/fillerListLoader.ts'; import { queryCache } from './queryClient.ts'; -import { map } from 'lodash-es'; const queryClient = new QueryClient({ queryCache });