Component: Autocomplete component - wrong options being sent to overlay componentWrong data is being sent as input to the overlay component inside auto complete component. Virtual scroll options (virtualScrollOptions) are being sent as input([options]) to the <p-overlay> component inside <p-autocomplete> component. Below is the screenshot of the code in the lts version which we bought recently 

[syam38]

Describe the bug

We bought 15 LTS version yesterday and noticed the below issue.

In our app we have a autocomplete component inside a modal which is scrollable. When the autocomplete dropdown is open if the user scrolls the main modal, the dropdown is being closed. We have to avoid that so trying to send custom config to the overlay options. And this change is not helping us as wrong input is being sent to the overlay component.

Here is the detailed description of the issue.

<p-autoComplete
      class="w-100 d-block"
      formControlName="fullName"
      placeholder="Enter Full Name"
      **[overlayOptions]="getOverlayOptions()"**
      [style]="{ width: '100%' }"
      [inputStyle]="{ width: '100%' }"
      [virtualScroll]="true"
      [virtualScrollItemSize]="30"
      [suggestions]="contacts"
      [forceSelection]="false"
      [virtualScrollOptions]="options"
      delay="500"
      (completeMethod)="search($event, 0)"
      (onSelect)="select($event)"
      (onClear)="clear()"
      [ngClass]="{
        'is-invalid':
          contactForm.get('fullName').invalid &&
          contactForm.get('fullName').touched
      }"
    >
      <ng-template let-contact pTemplate="item">
        <span>{{ contact.label }}</span>
      </ng-template>
    </p-autoComplete>

But inside the component Virtual scroll options (virtualScrollOptions) are being sent as input([options]) to the component instead of the overlayOptions as shown below. This has been copied from the autocomplete component itself.

    <p-overlay
    #overlay
    [(visible)]="overlayVisible"
    [options]="virtualScrollOptions"
    [target]="'@parent'"
    [appendTo]="appendTo"
    [showTransitionOptions]="showTransitionOptions"
    [hideTransitionOptions]="hideTransitionOptions"
    (onAnimationStart)="onOverlayAnimationStart($event)"
    (onShow)="show($event)"
    (onHide)="hide($event)"
  ></p-overlay>
    

Wrong data is being sent as input to the overlay component inside auto complete component. I can raise a pull request to fix this issue.

Environment

macos, chrome browser

Reproducer

No response

Angular version

15.2.9

PrimeNG version

15.4.17-lts

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

14.21.1

Browser(s)

chrome 123.0.6312.107

Steps to reproduce the behavior

This is not a functional issue but an issue with the code itself is wrong input is being sent to a component. And we are unable to override the overlay panel behaviour.

Expected behavior

Correct input - overlayOptions should be sent to the overlay component inside the autocomplete compoenent instead of virtualscrollOptions

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,