fix: prevent scroll element (#343)

kobaltedev · Feb 26, 2024 · 95fec3b · 95fec3b
1 parent 55e0432
commit 95fec3b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 1 deletion.
diff --git a/packages/core/src/combobox/combobox-content.tsx b/packages/core/src/combobox/combobox-content.tsx
@@ -103,6 +103,7 @@ export function ComboboxContent(props: ComboboxContentProps) {
 	});
 
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isOpen() && context.preventScroll(),
 	});
 

diff --git a/packages/core/src/date-picker/date-picker-content.tsx b/packages/core/src/date-picker/date-picker-content.tsx
@@ -192,6 +192,7 @@ export function DatePickerContent(props: DatePickerContentProps) {
 	});
 
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isModal() && context.isOpen(),
 	});
 

diff --git a/packages/core/src/dialog/dialog-content.tsx b/packages/core/src/dialog/dialog-content.tsx
@@ -176,6 +176,7 @@ export function DialogContent(props: DialogContentProps) {
 	});
 
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isOpen() && context.preventScroll(),
 	});
 

diff --git a/packages/core/src/menu/menu-content.tsx b/packages/core/src/menu/menu-content.tsx
@@ -12,12 +12,24 @@ export interface MenuContentProps
 	extends OverrideComponentProps<"div", MenuContentOptions> {}
 
 export function MenuContent(props: MenuContentProps) {
+	let ref: HTMLElement | undefined;
+
 	const rootContext = useMenuRootContext();
 	const context = useMenuContext();
 
+	const [local, others] = splitProps(props, ["ref"]);
+
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isOpen() && rootContext.preventScroll(),
 	});
 
-	return <MenuContentBase {...props} />;
+	return (
+		<MenuContentBase
+			ref={mergeRefs((el) => {
+				ref = el;
+			}, local.ref)}
+			{...others}
+		/>
+	);
 }
diff --git a/packages/core/src/popover/popover-content.tsx b/packages/core/src/popover/popover-content.tsx
@@ -175,6 +175,7 @@ export function PopoverContent(props: PopoverContentProps) {
 	});
 
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isOpen() && context.preventScroll(),
 	});
 

diff --git a/packages/core/src/select/select-content.tsx b/packages/core/src/select/select-content.tsx
@@ -90,6 +90,7 @@ export function SelectContent(props: SelectContentProps) {
 	});
 
 	createPreventScroll({
+		element: () => ref ?? null,
 		enabled: () => context.isOpen() && context.preventScroll(),
 	});