Merged PR 2052: fix(ui-input-controls): Fix Dropdown Scrolling Issue on IPAD

fix(ui-input-controls): Fix Dropdown Scrolling Issue on IPAD

Ref: #5505

libs/ui/input-controls/src/lib/dropdown/_dropdown.scss

@@ -73,11 +73,15 @@
   background: var(--Neutral-White, #fff);
   box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
   width: 100%;
+  max-height: 20rem;
+  overflow: hidden;
+  overflow-y: auto;
 
   .ui-dropdown-option {
     display: flex;
     width: 10rem;
     height: 3rem;
+    min-height: 3rem;
     padding: 0rem 1.5rem;
     flex-direction: row;
     justify-content: space-between;

libs/ui/input-controls/src/lib/dropdown/dropdown.component.html

@@ -15,8 +15,7 @@
   (backdropClick)="close()"
   (detach)="isOpen.set(false)"
 >
-  <ul [class]="['ui-dropdown__options']" role="listbox">
-    <!-- Fixed typo -->
+  <ul #optionsPanel [class]="['ui-dropdown__options']" role="listbox">
     <ng-content></ng-content>
   </ul>
 </ng-template>

libs/ui/input-controls/src/lib/dropdown/dropdown.component.ts

@@ -11,6 +11,7 @@ import {
   input,
   model,
   signal,
+  viewChild,
 } from '@angular/core';
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -25,6 +26,7 @@ import {
 import { isEqual } from 'lodash';
 import { DropdownAppearance } from './dropdown.types';
 import { DropdownService } from './dropdown.service';
+import { CloseOnScrollDirective } from '@isa/ui/layout';
 
 @Component({
   selector: 'ui-dropdown-option',
@@ -94,7 +96,13 @@ export class DropdownOptionComponent<T> implements Highlightable {
   selector: 'ui-dropdown',
   templateUrl: './dropdown.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [CdkOverlayOrigin],
+  hostDirectives: [
+    CdkOverlayOrigin,
+    {
+      directive: CloseOnScrollDirective,
+      outputs: ['closeOnScroll'],
+    },
+  ],
   imports: [NgIconComponent, CdkConnectedOverlay],
   providers: [
     provideIcons({ isaActionChevronUp, isaActionChevronDown }),
@@ -117,6 +125,7 @@ export class DropdownOptionComponent<T> implements Highlightable {
     '(keydown.escape)': 'close()',
     '(click)':
       'disabled() ? $event.stopImmediatePropagation() : (isOpen() ? close() : open())',
+    '(closeOnScroll)': 'close()',
   },
 })
 export class DropdownButtonComponent<T>
@@ -124,10 +133,14 @@ export class DropdownButtonComponent<T>
 {
   #dropdownService = inject(DropdownService);
   #scrollStrategy = inject(ScrollStrategyOptions);
+  #closeOnScroll = inject(CloseOnScrollDirective, { self: true });
 
   readonly init = signal(false);
   private elementRef = inject(ElementRef);
 
+  /** Reference to the options panel for scroll exclusion */
+  optionsPanel = viewChild<ElementRef<HTMLElement>>('optionsPanel');
+
   get overlayMinWidth() {
     return this.elementRef.nativeElement.offsetWidth;
   }
@@ -209,6 +222,14 @@ export class DropdownButtonComponent<T>
         .withWrap()
         .skipPredicate((option) => option.disabled);
     });
+
+    // Configure CloseOnScrollDirective: activate when open, exclude options panel
+    effect(() => {
+      this.#closeOnScroll.closeOnScrollWhen.set(this.isOpen());
+      this.#closeOnScroll.closeOnScrollExclude.set(
+        this.optionsPanel()?.nativeElement,
+      );
+    });
   }
 
   open() {