mirror of
https://github.com/vector-im/element-call.git
synced 2026-10-13 23:35:51 +00:00
Fix PortalRoot hiding the component's menus and tooltips
compound-web 10.4.0 treats a PortalRoot whose root is null as one whose root is not available yet, so floating-ui never mounts the portal and every tooltip label, and with it every icon button's accessible name, is missing. The component defaulted portalRoot to null and wrapped the call unconditionally. Wrap the call only when the host supplied a root, keeping null as the not-yet-available case Compound defines, and say so on the prop. Cover it in CallPortalRoot.test.tsx. Drop the git allowBuilds entry for compound-web now that it is a release again. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
b72493f47f
commit
9d0a12c38a
+5
-6
@@ -50,7 +50,7 @@ import {
|
||||
} from "react";
|
||||
import { logger } from "matrix-js-sdk/lib/logger";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
import { PortalRoot, TooltipProvider } from "@vector-im/compound-web";
|
||||
import { TooltipProvider } from "@vector-im/compound-web";
|
||||
import { ErrorBoundary } from "@sentry/react";
|
||||
import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
|
||||
import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
|
||||
@@ -82,6 +82,7 @@ import { useTheme } from "../src/useTheme";
|
||||
import { useStableValue } from "../src/useStableValue";
|
||||
import styles from "./ElementCall.module.css";
|
||||
import { useComponentHostBridge } from "./host";
|
||||
import { CallPortalRoot } from "./CallPortalRoot";
|
||||
import { type ElementCallProps } from "./api";
|
||||
import { supportedLanguages, translationsBackend } from "./localization";
|
||||
|
||||
@@ -154,7 +155,7 @@ export const ElementCall: FC<ElementCallProps> = ({
|
||||
ref,
|
||||
theme,
|
||||
language,
|
||||
portalRoot = null,
|
||||
portalRoot,
|
||||
}): ReactNode => {
|
||||
const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme);
|
||||
|
||||
@@ -241,9 +242,7 @@ export const ElementCall: FC<ElementCallProps> = ({
|
||||
// Stands in for the standalone page's `#root`: see `.content`
|
||||
// in ElementCall.module.css
|
||||
<div className={styles.content}>
|
||||
{/* Where Compound floats the call's menus and tooltips: the
|
||||
host's body unless the host says otherwise (see `portalRoot`) */}
|
||||
<PortalRoot root={portalRoot}>
|
||||
<CallPortalRoot root={portalRoot}>
|
||||
<RootElementProvider value={container}>
|
||||
{/* Whatever goes wrong in here is shown in here. Left to
|
||||
propagate, an error would unmount the host's own tree. */}
|
||||
@@ -272,7 +271,7 @@ export const ElementCall: FC<ElementCallProps> = ({
|
||||
</Decoration>
|
||||
</ErrorBoundary>
|
||||
</RootElementProvider>
|
||||
</PortalRoot>
|
||||
</CallPortalRoot>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user