From 44ccdec9bf7a8011d414c1bb9c9de8c0cd4ba789 Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Mon, 30 Dec 2024 21:58:12 -0300 Subject: [PATCH 1/2] Change `aria-hidden` to `inert` --- .../views/root/MainLayout/LayoutWithSidebar.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx index c21cfd6a01a5..9d293033976b 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx +++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx @@ -1,12 +1,20 @@ import { Box } from '@rocket.chat/fuselage'; import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, version } from 'react'; import AccessibilityShortcut from './AccessibilityShortcut'; import { MainLayoutStyleTags } from './MainLayoutStyleTags'; import Sidebar from '../../../sidebar'; +const inertBooleanSupported = Number(version.split('.')[0]) >= 19; + +/** + * Before version 19, react JSX treats empty string "" as truthy for inert prop. + * @see {@link https://stackoverflow.com/questions/72720469} + * */ +const isInert = inertBooleanSupported ? (x: boolean) => x : (x: boolean) => (x ? '' : undefined); + const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => { const { isEmbedded: embeddedLayout } = useLayout(); @@ -44,7 +52,10 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement bg='surface-light' id='rocket-chat' className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')} - aria-hidden={Boolean(modal)} + // @types/react does not recognize the "inert" prop as of now + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + inert={isInert(Boolean(modal))} > From 5249ab75011127dfb485749bdd8da40223286aba Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Mon, 30 Dec 2024 22:24:17 -0300 Subject: [PATCH 2/2] add changeset --- .changeset/moody-foxes-sleep.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/moody-foxes-sleep.md diff --git a/.changeset/moody-foxes-sleep.md b/.changeset/moody-foxes-sleep.md new file mode 100644 index 000000000000..2cd5425a1acb --- /dev/null +++ b/.changeset/moody-foxes-sleep.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +fixes an issue where opening a modal for the first times renders it's inputs unusable