fixed that the select dropdown menu wasn't working in a modal

marcus-wishes · marcus-wishes · commit d3588b6a0c93 · 2024-10-15T16:04:38.000+02:00
diff --git a/library/src/components/Modal.tsx b/library/src/components/Modal.tsx
@@ -91,6 +91,9 @@ function Container({
 					}
 					id={id}
 					data-testid={testId}
+					onWheel={(e) => {
+						e.stopPropagation() // this is necessary or scrolling will not work in the select dropdown menu in the modal
+					}}
 				>
 					<VisuallyHidden>
 						<RDialog.DialogDescription>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -156,7 +156,7 @@
 		"stylelint-config-tailwindcss": "^0.0.7",
 		"stylelint-order": "^6.0.4",
 		"tailwind-merge": "^2.5.4",
-		"tailwindcss": "^3.4.13",
+		"tailwindcss": "^3.4.14",
 		"typescript": "^5.6.3",
 		"typescript-plugin-css-modules": "^5.1.0",
 		"vite": "^5.4.9",
diff --git a/showcase/src/components/showcase/wrapper/ModalShowcase.tsx b/showcase/src/components/showcase/wrapper/ModalShowcase.tsx
@@ -170,6 +170,7 @@ function ControlledExample() {
 					}}
 					shouldCloseOnEscapePress={true}
 					accessibleDialogDescription="This is a modal dialog example"
+					useModal={true}
 				>
 					<Modal.Header>
 						<Modal.Title accessibleDialogTitle="Sample Modal">
@@ -195,6 +196,7 @@ function ControlledExample() {
 							placeholder="Choose..."
 							options={selectOptions}
 							menuPlacement="top"
+							menuIsOpen
 						/>
 						<Dropdown.Menu
 							className="w-full"

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,9 @@ function Container({`
`91`	`91`	`}`
`92`	`92`	`id={id}`
`93`	`93`	`data-testid={testId}`
	`94`	`+ onWheel={(e) => {`
	`95`	`+ e.stopPropagation() // this is necessary or scrolling will not work in the select dropdown menu in the modal`
	`96`	`+ }}`
`94`	`97`	`>`
`95`	`98`	`<VisuallyHidden>`
`96`	`99`	`<RDialog.DialogDescription>`