diff --git a/frontend/src/ui/Blocks/Series.tsx b/frontend/src/ui/Blocks/Series.tsx index 11310ba9c..10039a804 100644 --- a/frontend/src/ui/Blocks/Series.tsx +++ b/frontend/src/ui/Blocks/Series.tsx @@ -1,5 +1,6 @@ import React, { ReactNode, + RefObject, createContext, useContext, useEffect, @@ -11,7 +12,7 @@ import { useTranslation } from "react-i18next"; import { graphql, useFragment } from "react-relay"; import { match, unreachable, ProtoButton, screenWidthAtMost, screenWidthAbove, - useColorScheme, Floating, FloatingHandle, + useColorScheme, Floating, FloatingHandle, useFloatingContext, } from "@opencast/appkit"; import { keyOfId, isSynced, SyncedOpencastEntity } from "../../util"; @@ -321,7 +322,7 @@ const OrderMenu: React.FC = () => { }); return {triggerContent}} list={ ref.current?.close()} />} @@ -348,9 +349,8 @@ const ViewMenu: React.FC = () => { ); return ref.current?.close()} />} />; }; @@ -365,6 +365,7 @@ const List: React.FC = ({ type, close }) => { const isDark = useColorScheme().scheme === "dark"; const { viewState, setViewState } = useContext(ViewContext); const { eventOrder, setEventOrder } = useContext(OrderContext); + const { refs, activeIndex } = useFloatingContext(); const itemId = useId(); const listStyle = { @@ -402,29 +403,38 @@ const List: React.FC = ({ type, close }) => { ["Z-A", "z-a"], ]; + const sharedProps = (index: number, key: View | OrderTranslationKey) => ({ + close: close, + tabIndex: activeIndex === index || !activeIndex ? 0 : -1, + label: t(`series.settings.${key}`), + ref: (node: HTMLButtonElement) => { + if (refs.listRef.current !== null) { + refs.listRef.current[index] = node; + } + }, + }); + const list = match(type, { view: () => <>
{t("series.settings.view")}
    - {viewItems.map(([view, icon]) => setViewState(view)} - {...{ close }} Icon={icon} - label={t(`series.settings.${view}`)} + {...sharedProps(index, view)} />)}
, order: () => <>
{t("series.settings.order")}
    - {orderItems.map(([order, key]) => setEventOrder(order)} - {...{ close }} - label={t(`series.settings.${key}`)} + {...sharedProps(index, orderKey)} />)}
, @@ -446,11 +456,14 @@ type MenuItemProps = { label: string; onClick: () => void; close: () => void; - disabled?: boolean; + disabled: boolean; + tabIndex: number; + ref: RefObject; }; -const MenuItem: React.FC = ({ Icon, label, onClick, close, disabled }) => { - const ref = useRef(null); +const MenuItem = React.forwardRef(({ + Icon, label, onClick, close, disabled, tabIndex, +}, ref) => { const isDark = useColorScheme().scheme === "dark"; return ( @@ -463,8 +476,7 @@ const MenuItem: React.FC = ({ Icon, label, onClick, close, disabl }, }}> { onClick(); @@ -494,7 +506,7 @@ const MenuItem: React.FC = ({ Icon, label, onClick, close, disabl ); -}; +}); // ==============================================================================================