diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 8317910ded..62c236e9cb 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -232,12 +232,6 @@ const StyledMultiDropDown = styled(MultiDropDown)<{
 class DropDownComponent extends React.Component<DropDownComponentProps> {
   private _menu = React.createRef<HTMLDivElement>();
 
-  isModalWidgetParent = () => {
-    if (Boolean(this._menu.current?.closest(".bp3-modal-widget"))) {
-      return document.querySelector(".bp3-modal-widget") as HTMLElement;
-    }
-    return document.querySelector(".appsmith_widget_0") as HTMLElement;
-  };
   render() {
     const { options, selectedIndexArr } = this.props;
     const selectedItems = selectedIndexArr
@@ -307,7 +301,9 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
-                portalContainer: this.isModalWidgetParent(),
+                portalContainer: this.props.getDropdownPosition(
+                  this._menu.current,
+                ),
                 modifiers: {
                   preventOverflow: {
                     enabled: false,
@@ -434,6 +430,7 @@ export interface DropDownComponentProps extends ComponentProps {
   isFilterable: boolean;
   width: number;
   height: number;
+  getDropdownPosition: (node: HTMLDivElement | null) => HTMLElement;
 }
 
 export default DropDownComponent;
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index 4ff66ba227..b308a7f00e 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -75,7 +75,6 @@ export function ModalComponent(props: ModalComponentProps) {
       modalContentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     }
   }, [props.scrollContents]);
-  console.log(props.height, props.width, props.left, props.top);
   return (
     <Overlay
       canEscapeKeyClose={false}
@@ -85,9 +84,6 @@ export function ModalComponent(props: ModalComponentProps) {
       isOpen={props.isOpen}
       onClose={props.onClose}
       portalClassName="bp3-modal-widget"
-      portalContainer={
-        document.querySelector(".t--canvas-artboard") as HTMLElement
-      }
       usePortal
     >
       <Container
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index e0e4dd8782..5abc5a4a40 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -147,6 +147,12 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       ? this.props.selectedOptionValueArr
       : [];
   }
+  getDropdownPosition = (node: HTMLDivElement | null) => {
+    if (Boolean(node?.closest(".bp3-modal-widget"))) {
+      return document.querySelector(".bp3-modal-widget") as HTMLElement;
+    }
+    return document.querySelector(".appsmith_widget_0") as HTMLElement;
+  };
 
   getPageView() {
     const options = this.props.options || [];
@@ -158,6 +164,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     return (
       <DropDownComponent
         disabled={this.props.isDisabled}
+        getDropdownPosition={this.getDropdownPosition}
         height={componentHeight}
         isFilterable={this.props.isFilterable}
         isLoading={this.props.isLoading}