diff --git a/packages/pl-api/lib/entities/media-attachment.ts b/packages/pl-api/lib/entities/media-attachment.ts index c3aa87a5c..2017f129e 100644 --- a/packages/pl-api/lib/entities/media-attachment.ts +++ b/packages/pl-api/lib/entities/media-attachment.ts @@ -88,11 +88,15 @@ const unknownAttachmentSchema = baseAttachmentSchema.extend({ }); /** @see {@link https://docs.joinmastodon.org/entities/MediaAttachment} */ -const mediaAttachmentSchema = z.preprocess((data: any) => ({ - mime_type: data.pleroma?.mime_type, - preview_url: data.url, - ...data, -}), z.discriminatedUnion('type', [ +const mediaAttachmentSchema = z.preprocess((data: any) => { + if (!data) return null; + + return { + mime_type: data.pleroma?.mime_type, + preview_url: data.url, + ...data, + }; +}, z.discriminatedUnion('type', [ imageAttachmentSchema, videoAttachmentSchema, gifvAttachmentSchema, diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx index 2fd6fa076..d03f334da 100644 --- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx @@ -140,14 +140,14 @@ const DropdownMenu = (props: IDropdownMenu) => { } }; - const handleDocumentClick = (event: Event) => { + const handleDocumentClick = useMemo(() => (event: Event) => { if (refs.floating.current && !refs.floating.current.contains(event.target as Node)) { handleClose(); event.stopPropagation(); } - }; + }, [refs.floating.current]); - const handleKeyDown = (e: KeyboardEvent) => { + const handleKeyDown = useMemo(() => (e: KeyboardEvent) => { if (!refs.floating.current) return; const items = Array.from(refs.floating.current.querySelectorAll('a, button')); @@ -185,7 +185,7 @@ const DropdownMenu = (props: IDropdownMenu) => { e.preventDefault(); e.stopPropagation(); } - }; + }, [refs.floating.current]); const arrowProps: React.CSSProperties = useMemo(() => { if (middlewareData.arrow) { @@ -325,27 +325,29 @@ const DropdownMenu = (props: IDropdownMenu) => { }} > {Component && } - + autoFocus={autoFocus} + /> + ))} + {touching && ( +
  • + +
  • + )} + + )} {/* Arrow */} {!touching && ( diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx index c4938c822..46811f5c0 100644 --- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx +++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React, { useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose'; @@ -103,6 +103,12 @@ const PrivacyDropdownMenu: React.FC = ({ } }; + useEffect(() => { + if (node.current) { + (node.current?.querySelector('li[aria-selected=true]') as HTMLDivElement)?.focus(); + } + }, [node.current]); + return (