panelViewportPageSize does not accept dynamic values

[Klaster1]

First of all, thank you for the library, good job so far 👍 And слава Україні!

What happens: Binding a dynamic value to panelViewportPageSize does not affect the panel size and remains at 8.

Expected: The panel size matches the bound value.

How to reproduce: See the Blitz.

Note: I was trying to dynamically size the panel so it doesn't have an empty white space when the amount of items is less than the panel size. If it were to me, I'd make this the default behavior.

[Klaster1]

Rough workaround:

@Directive({
  selector: 'ngx-virtual-select-field[panelViewportPageSize]',
  standalone: true,
})
export class FixVirtualSelectGapsDirective<T> {
  select = inject(NgxVirtualSelectFieldComponent);
  document = inject(DOCUMENT);
  destroyRef = inject(DestroyRef);
  panelViewportPageSize = input.required<number>();

  constructor() {
    afterNextRender(() => {
      this.select.cdkConnectedOverlay.attach.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
        this.setSize(this.select.optionFor.options$.getValue().length);
      });
      this.select.cdkConnectedOverlay.detach.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
        this.setSize(null);
      });
    });
  }
  private setSize(size: null | number) {
    if (size === null) {
      this.document.body.style.removeProperty('--ngx-virtual-select-field-panel-viewport-page-size');
    } else {
      this.document.body?.style.setProperty(
        '--ngx-virtual-select-field-panel-viewport-page-size',
        `${size < this.panelViewportPageSize() ? size : this.panelViewportPageSize()}`,
      );
    }
  }
}

[Vizer]

Thanks you very muck for your feedback. Героям Слава :)

panelViewportPageSize input is used to center selected value after panel open. There is a separate css variable to modify panel height --ngx-virtual-select-field-panel-viewport-page-size.

I agree that this might be confusing. I tried to get rid of additional css variable but posponed until I have more time.

Note: I would recomment to use regulat mat-select component if you do not need a virtual scroll. I agree the this as a valid use case but initialy I focused on a large option list. Will need more time to hadle this

[Klaster1]

I would recomment to use regulat mat-select component if you do not need a virtual scroll. I agree the this as a valid use case but initialy I focused on a large option list. Will need more time to hadle this

Simple to implement select with virtual scrolling was the chief reason to try your library. The amount of items displayed in the control can potentially span hundreds of items. I know a select won't be the best choice because of UX issues, but it serves as a reasonable stopgap solution until I've got time to implement a fancy rich control, which may never happen.

[Vizer]

I will try do adjust height later this week.

btw, what is your use case for virtual scroll? Is this for production code? And I am just curious, what do you mean under fancy rich control?

[Klaster1]

btw, what is your use case for virtual scroll? Is this for production code?

A form control to select items. Usually, it contains tens of items, but recently reported user feedback revealed that sometimes it can bloat to hundreds. Virtual scroll helped me to bring other UI elements that work with this data up to date, however, given the available resources, my team preferred to go with your library rather than rolling out something custom. This will go into production if no blocking bugs are discovered.

And I am just curious, what do you mean under fancy rich control?

By that, I meant a purpose-built control that's optimized for all use cases the project's willing to consider. Usually, some variation of select on steroids, like a button that opens a dialog with multiple views into same data, with sufficient search capabilities and maybe even different UI for different types of users (casual vs advanced).

[Vizer]

@Klaster1, I have improved panel height. Now it takes into account if options maount is less the panel page size. Try v1.1.0. Demo available on the bottom with only 3 options

[Klaster1]

Great job, I confirm that the fix works as intended without workarounds👍