Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-05 18:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🚧 fix: OriginalDialog Modal Tooltip and Dropdown Menu Regressions from (#10975, #10952, #11008) (#11023)
Some checks are pending
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Waiting to run
Details
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Waiting to run
Details

Browse source 
* fix: tooltips appear over z-index 100

* fix: tooltips and dropdowns now have xpected behavior again with escape

* fix: query document, not on ref, in case of portaled content, and allows escape to close dialog properly for my files modal

* fix: console warning about improperly passing props
This commit is contained in:
Dustin Healy 2025-12-18 06:28:27 -08:00 • committed by GitHub
parent afb67fcf16
commit 1f695e0cdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 200 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

28
packages/client/src/components/OriginalDialog.tsx
View file

@ -9,7 +9,7 @@ interface OGDialogProps extends DialogPrimitive.DialogProps {
}
const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
({ children, triggerRef, triggerRefs, onOpenChange, ...props }) => {
({ children, triggerRef, triggerRefs, onOpenChange, ...props }, ref) => {
const handleOpenChange = (open: boolean) => {
if (!open && triggerRef?.current) {
setTimeout(() => {
@ -78,26 +78,22 @@ const DialogContent = React.forwardRef<
},
ref,
) => {
const contentRef = React.useRef<HTMLDivElement>(null);
React.useImperativeHandle(ref, () => contentRef.current as HTMLDivElement, []);
/* Handle Escape key to prevent closing dialog if a tooltip or dropdown is open
(this is a workaround in order to achieve WCAG compliance which requires
that our tooltips be dismissable with Escape key) */
const handleEscapeKeyDown = React.useCallback(
(event: KeyboardEvent) => {
if (!contentRef.current) {
propsOnEscapeKeyDown?.(event);
return;
}
const tooltips = contentRef.current.querySelectorAll('.tooltip');
const dropdownMenus = contentRef.current.querySelectorAll('[role="menu"]');
const tooltips = document.querySelectorAll('.tooltip');
const dropdownMenus = document.querySelectorAll('[role="menu"]');
for (const tooltip of tooltips) {
const style = window.getComputedStyle(tooltip);
if (style.display !== 'none') {
if (
style.display !== 'none' &&
style.visibility !== 'hidden' &&
parseFloat(style.opacity) > 0
) {
event.preventDefault();
return;
}
@ -105,7 +101,11 @@ const DialogContent = React.forwardRef<
for (const dropdownMenu of dropdownMenus) {
const style = window.getComputedStyle(dropdownMenu);
if (style.display !== 'none') {
if (
style.display !== 'none' &&
style.visibility !== 'hidden' &&
parseFloat(style.opacity) > 0
) {
event.preventDefault();
return;
}
@ -120,7 +120,7 @@ const DialogContent = React.forwardRef<
<DialogPortal>
<DialogOverlay className={overlayClassName} />
<DialogPrimitive.Content
ref={contentRef}
ref={ref}
onEscapeKeyDown={handleEscapeKeyDown}
className={cn(
'max-w-11/12 fixed left-[50%] top-[50%] z-[100] grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',

2
packages/client/src/components/Tooltip.css
View file

@ -1,5 +1,5 @@
.tooltip {
z-index: 50;
z-index: 150;
cursor: pointer;
pointer-events: auto;
border-radius: 0.275rem;