Fix Dropdowns of editors do not scroll with the page (T1188807). (#189)

* Fix Dropdowns of editors do not scroll with the page (T1188807). Fire scroll event from body to force hiding opened editors dropdowns, because <body> is theirs scroll parent
DevExpress · Sep 19, 2023 · 1a0dc7b · 1a0dc7b
1 parent 8b8df62
commit 1a0dc7b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/src/app/left-menu/main/left-menu.component.html b/src/app/left-menu/main/left-menu.component.html
@@ -1,7 +1,7 @@
 <div class="left-menu">
     <div class="working-area">
         <div class="scroll-container" *ngIf="workArea">
-            <dx-scroll-view>
+            <dx-scroll-view (onScroll)="fireScrollEventForClosingDropdowns()">
             <div *ngFor="let data of filteredData">
                 <div class="name top search-active" *ngIf="searchOpened">
                     <div class="link-handler" [routerLink]="['/advanced', theme, colorScheme, data.route]"></div>
@@ -46,7 +46,7 @@
             <div>
                 <app-back-navigator text="Back"></app-back-navigator>
             </div>
-            
+
         </div>
         <div class="separator"></div>
         <div class="scroll-container">

diff --git a/src/app/left-menu/main/left-menu.component.ts b/src/app/left-menu/main/left-menu.component.ts
@@ -187,6 +187,10 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         });
     }
 
+    fireScrollEventForClosingDropdowns() {
+        document.body.dispatchEvent(new Event('scroll'));
+    }
+
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
     }

diff --git a/src/app/preview/editors/editors.component.html b/src/app/preview/editors/editors.component.html
@@ -40,7 +40,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="outlined"></dx-date-range-box>
+                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
         <div class="block filled">
@@ -70,7 +70,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="filled"></dx-date-range-box>
+                <dx-date-range-box stylingMode="filled" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
         <div class="block underlined">
@@ -100,7 +100,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="underlined"></dx-date-range-box>
+                <dx-date-range-box stylingMode="underlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
     </div>

diff --git a/src/app/preview/editors/editors.component.ts b/src/app/preview/editors/editors.component.ts
@@ -11,7 +11,7 @@ export class EditorsComponent implements OnInit, OnDestroy {
     widgetGroup = 'editors';
     isExpanded = new BehaviorSubject<boolean>(false);
     subscription: Subscription;
-
+    dropDownOptions = {hideOnParentScroll: true};
     labelMode = 'floating';
 
     ngOnInit(): void {

diff --git a/src/app/preview/preview/preview.component.html b/src/app/preview/preview/preview.component.html
@@ -1,4 +1,4 @@
-<dx-scroll-view #scrollView class="preview-scrollview">
+<dx-scroll-view #scrollView class="preview-scrollview" (onScroll)="fireScrollEventForClosingDropdowns()">
     <div class="flex-container">
         <div class="flex-item group">
             <div class="flex-item">
@@ -51,7 +51,7 @@
                 <app-form #widget></app-form>
             </div>
         </div>
-        <div class="flex-item"> 
+        <div class="flex-item">
             <app-button-detailed widget="list" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
             <div class="flex-label">LIST</div>
             <div class="flex-value">
@@ -110,7 +110,7 @@
                     <app-tabs #widget></app-tabs>
                 </div>
             </div>
-        </div> 
+        </div>
         <div class="flex-item group">
             <div class="flex-item">
                 <app-button-detailed widget="progressbars" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>

diff --git a/src/app/preview/preview/preview.component.ts b/src/app/preview/preview/preview.component.ts
@@ -113,4 +113,8 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
     ngAfterViewInit(): void {
         this.createPreviewContent(this.widgetName);
     }
+
+    fireScrollEventForClosingDropdowns() {
+        document.body.dispatchEvent(new Event('scroll'));
+    }
 }