[scrollStrategy] is not working for popovers.

[22shubham22]

Bug

Whenever we try to implement popovers , so as per the documentation for popovers : https://sap.github.io/fundamental-ngx/#/core/popover#scroll [scrollStrategy] is not working.

Under Normal Circumstance the popover should scroll up and down when page is being scrolled and default scrollstrategy is repositionScrollStrategy. But none of the scroll Strategy is working, tried with close scroll strategy that also didn't work..

So what happens , If we open a popover , and then scroll the page while the popover is open the popover will not scroll up and down with the popover body . The popover sticks at one static place. This issue is also noticed in Menu as Menu is based on popover.

1. When Create button is pressed a popover opens : (create button is the popover body)

2. When we scroll , the page moves up , create button moves up but the popover which is supposed to move up along with create button sticks to its same position on the screen.

HTML File:

`<fd-popover [scrollStrategy]="repositionScrollStrategy" *ngIf="typesLoaded && applicationTypes.length > 1">

            <fd-popover-body>
                <ul fd-list [byline]="true">
                    <div #projectMenu>
                        <li *ngFor="let application of applicationTypes"
                            (click)="!application.isDisabled && openNewprojectDialogBox(application.name, true)" [ngClass]= 
                            {'createdisabled': application.isDisabled}" fd-list-link>
                            <a class="projectMenuPopover" fd-list-content>
                                <div fd-list-title><b>{{application.name}}</b></div>
                                <div fd-list-byline>{{application.description | translate}}</div>
                            </a>
                        </li>
                    </div>
                </ul>
            </fd-popover-body>
      </fd-popover>`

Ts file:

ngOnInit(): void { this.repositionScrollStrategy = this._overlay.scrollStrategies.reposition({ autoClose: this.autoClose, scrollThrottle: this.scrollThrottle, }); }

Now I tried this way for close scroll strategy also and it did not work too.

Angular version : 12.2.1 fundamental-ngx/core: 0.28.3

[github-actions[bot]]

Hello @22shubham22, thank you for using fundamental-ngx! The fundamental-ngx team will triage your issue as soon as possible.

[mikerodonnell89]

@22shubham22 I am unable to recreate this bug with the Angular and fundamental-ngx versions you have specified, and copying your template HTML as best I could without the complete component code. Reposition and Close scroll strategies are working as intended. Are you able to recreate this issue in a stackblitz?

[22shubham22]

@22shubham22 I am unable to recreate this bug with the Angular and fundamental-ngx versions you have specified, and copying your template HTML as best I could without the complete component code. Reposition and Close scroll strategies are working as intended. Are you able to recreate this issue in a stackblitz?

When i open stackblitz from ngx fundamentals page , i get this error :

Error in src/styles.scss (1:9) NoSuchMethodError: method not found: 'source' on null ╷ 1 │ @import "@angular/cdk/overlay-prebuilt"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ ../~/src/styles.scss 1:9 root stylesheet

so i resolve it by installing required dependencies. then i can see the buttons forming in the live code server but when i try to click on the buttons to open the popover i get this error.

ERROR Error: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.

StackBlitz : https://stackblitz.com/edit/angular-n5khqw?file=src%2Fapp%2Fpopover-scroll-example.component.ts

[droshev]

@22shubham22 I tried exporting this in stackblitz and it is working as expected.

[22shubham22]

@22shubham22 I tried exporting this in stackblitz and it is working as expected.

Issue cannot be recreated in stackblitz but in our project none of the popovers are working as expected. @mikerodonnell89 @droshev

https://sap-my.sharepoint.com/:v:/p/shubham_anand/Eecqt2sXJOdDuKP3-f20Mb4BqQS9nm04mn05SID5Ux4Wpw?e=5kd4JX