Scrollable fd-select with a scrollbar

[KamilaZaeva-sap]

Describe your proposal

Hi team,
I've opened a discussion long time ago but looks that nobody checks this. So, it will be here.

When I have a fd-select component into any <div>, select's list of options move together with scrolling of the page when it supposed to be fixed with the component.
I've attached a very simple stackblitz example where you can see it.

Which versions of Angular and Fundamental Library for Angular are affected?

Angular: 21.1.0, Fundamental: 0.59.1, WebComponents

Affected Component

https://sap.github.io/fundamental-ngx/#/core/select

Steps to Reproduce (for bugs)

1. Open my stackblitz example
2. Click on "select" component (fd-select)
3. Scroll the page when the select list opened
4. The list is scrolling with the page

Feel free to contact with me directly via Teams (kamila.zaeva@sap.com), I can show plenty of other examples of the bug that we have in our SAP Minutes tool when use the component Select.

StackBlitz example(s)

https://stackblitz.com/edit/nqyv4nkq-szj7nab3

Priority

Medium

Declaration

• I'm not disclosing any internal or sensitive information.

[InnaAtanasova]

hi @KamilaZaeva-sap and thanks for opening the issue.
The problem you are describing is related to how Angular CDK's scroll detection works, combined with how the popover is configured.
The default scroll strategy of the popover is RepositionScrollStrategy — which should reposition the overlay when scrolling occurs. But it doesn't fire in your scenario because the scroll event of the div doesn't bubble.

CDK's RepositionScrollStrategy delegates to ScrollDispatcher.scrolled(). The ScrollDispatcher only knows about two sources of scroll events:

• Document-level scroll: A single document scroll listener (always registered)
• cdkScrollable containers: Elements with the cdkScrollable directive that explicitly register themselves

The DOM scroll event does not bubble. When your <div style="overflow: auto"> scrolls, that event stays on that div — it never reaches the document. And since that div has no cdkScrollable directive, it never registered with ScrollDispatcher either.

The fix is to add cdkScrollable to the scrollable container. In your example:

<div style="height: 400px; overflow: auto;" cdkScrollable>
  <fd-select ...>...</fd-select>
  <div style="height: 800px;">Long block</div>
</div>

This registers the div with CDK's ScrollDispatcher, so when it scrolls, the RepositionScrollStrategy fires and calls overlayRef.updatePosition().

Now, additionally to this you can configure how the options list will behave on scroll. We already have this API is Select component through scrollStrategy input.
If you want the options list to close, you can do something like this:

(This is your example, with inline CSS)

<div style=" display: block; height: 400px; background-color: #00ffff; overflow: auto;" cdkScrollable>
  <fd-select
    [scrollStrategy]="scrollStrategy"
    [(value)]="selectedValue1"
    [controlTemplate]="customSelectNotesTemplate"
  >
    @for (option of options; track option) {
        <li fd-option [value]="option">{{ option }}</li>
    }
  </fd-select>

  <ng-template #customSelectNotesTemplate>
    <div>Note Type</div>
  </ng-template>

  <div style="display: flex; flex-direction: column; justify-content: space-between; height: 800px; width: 100px; background-color: plum;">
    <span>Long block start</span>
    <span>Long block end</span>
  </div>
</div>

In your TS code:

import { CdkScrollable } from '@angular/cdk/scrolling';
import { Overlay } from '@angular/cdk/overlay';
import { Component, inject } from '@angular/core';
import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
import { SelectModule } from '@fundamental-ngx/core/select';

@Component({
    selector: 'fd-select-mode-example',
    templateUrl: './select-mode-example.component.html',
    imports: [SelectModule, ContentDensityDirective, CdkScrollable]
})
export class SelectModeExampleComponent {
    private readonly _overlay = inject(Overlay);
    readonly scrollStrategy = this._overlay.scrollStrategies.close();
    options: string[] = ['Apple', 'Pineapple', 'Tomato', 'Strawberry'];
    selectedValue1: string;
    selectedValue2: string;
    selectedValue3: string;
    selectedValue4 = this.options[2];
    selectedValue5 = this.options[0];
}

You will need to add CdkScrollable and Overlay for all this to work.

Let me know if this solves the issue on your end or you have further questions.