haidarz/ng-mat-select-infinite-scroll

Infinite Scroll directive for angular material select component

ng-mat-select-infinite-scroll's Issues

Can I prevent auto scroll top?

Hi @HaidarZ , when I scroll down to the bottom and getNextBatch is triggered, the list items are scrolled automatically to top. How can I prevent this action?
I’m using version 2.0.0 with angular 8.
Another issue is that the demo page on stackblitz is not working

Angular and material 11 support.

I don't see a big issues in updating the dependency list to support the latest angular versions.

Is there a breaking change that prevents this project from being updated? would try to help if that's the case.

I inherited a codebase from someone else which made heavy usage of this plugin and now I'm trying to update to Angular 11.

IE Issue

When you close the mat-select, the openedChange event no longer fires, therefore you no longer get the scroll functionality. So wherever you scrolled when you originally opened it and scrolled to, is all you get when you open up the select again.

(In IE only, works great in Chrome)

Reload don't trigger if first selected element is the last of the first batch

On the first open of the select, if the first selected item is the last of the first batch, the select will scroll to the first selected.
But the method in (infiniteScroll) will not be triggered.

Hi,

    Hi,

Since this issue was opened Angular is now v12, I had no issues with this package on v11 but it seems Material has removed/changed some exports that this package was dependent on since updating to 12.

./node_modules/ng-mat-select-infinite-scroll/__ivy_ngcc__/fesm2015/ng-mat-select-infinite-scroll.js:17:34-55 - Error: export 'SELECT_ITEM_HEIGHT_EM' (imported as 'SELECT_ITEM_HEIGHT_EM') was not found in '@angular/material/select' (possible exports: MAT_SELECT_CONFIG, MAT_SELECT_SCROLL_STRATEGY, MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, MAT_SELECT_TRIGGER, MatSelect, MatSelectChange, MatSelectModule, MatSelectTrigger, _MatSelectBase, matSelectAnimations)

./node_modules/ng-mat-select-infinite-scroll/__ivy_ngcc__/fesm2015/ng-mat-select-infinite-scroll.js:66:67-88 - Error: export 'SELECT_ITEM_HEIGHT_EM' (imported as 'SELECT_ITEM_HEIGHT_EM') was not found in '@angular/material/select' (possible exports: MAT_SELECT_CONFIG, MAT_SELECT_SCROLL_STRATEGY, MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, MAT_SELECT_TRIGGER, MatSelect, MatSelectChange, MatSelectModule, MatSelectTrigger, _MatSelectBase, matSelectAnimations)

Hope this helps

Originally posted by @Khazii in #18 (comment)

Update to the latest version

After updating to the latest version, I receive the following error:
Error: ./node_modules/ng-mat-select-infinite-scroll/fesm2015/ng-mat-select-infinite-scroll.js 92:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Can anyone correlate?

Has anyone faced a concurrency problem with the same http call?

Hi, there!
I'll try to explain better the issue.

I have a formArray in Angular. In each iteration of this array I render an 'infinite-scroll component' with the same api call, let's say it's for load a customers dropdown/mat-select.
What happens if I have more than one element in the form array? Each infinite-scroll will make the same http call fetching the same data, has anyone faced this issue before? Is there a solution for 'share' the result between infinite-scroll components?

Infinite scroll not working when mat-option is added inside of a div element

Below is how I'm using infinite scroll with mat-select:

I've checked and found that when mat-options are put inside of div onscroll stops working.

<div class="general-input-block filter">
    <label>Amenities</label>
    <mat-select msInfiniteScroll (infiniteScroll)="loadAmenities()" 
      panelClass="general-select" [(value)]="selectedAmenities" class="input"
      placeholder="Select Amenity" (selectionChange)="loadReservations();" multiple>
       <div class="select-scroll-block select-scroll-block-amenity select-options-block checkbox-dropdown">
        <mat-option [value]="amenity.id" *ngFor="let amenity of amenities">
          {{ amenity.name }}
        </mat-option>
      </div>
    </mat-select>
  </div>

Support for MatAutocomplete

Hi

MatSelect and MatAutocomplete are very similar elements and I would expect to use this directive with MatAutocomplete.
Here is my code :

    <mat-autocomplete
      msInfiniteScroll
      (infiniteScroll)="nextBatch()"
      [complete]="endOfOptions"
    >
      <mat-option *ngFor="let option of optionsBatch$ | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>

Unfortunately the nextBatch function gets called only once but not when scrolling. I can never go beyond the 1st batch.

Is it possible to add support for MatAutocomplete ?

Thx

Scroll "stuck" after selecting the last element, multiple times

Great directive, thanks!
I have an issue in the current provided example:
https://stackblitz.com/edit/ng-mat-select-infinite-scroll
Reproduction:

1. Open the "select" and select "Option 4".
2. Close the "select", reopen and select "Option 6"
3. Close the "select", reopen and select "Option 8"
4. Close the "select", reopen it, Now the scroll bar doesn't move down - it's like we are at the end of the list, but it's not correct.
   

Will there be support for Angular 9?

Angular 15 compatibility with new and legacy components

Hi,

currently this library blocks update to Angular 15 because it expects old version of MatSelectModule.

I'd like to request support for:

• MatLegacySelectModule - changes and effort required to migrate whole styled app to new components would be massive, it's preferable to ease this transition by being able to stay on legacy components for now
• new MatSelectModule - obvious

Cheers!

pre selected value

hi ,

after set value of mat-select , no pre-selection is visible.could you help with this issue

Is it possible to avoid the 'scroll up' when scrolling down on limit of infinite scroll?

Angular 10 support

While upgrading to Angular 10, the material dependency in this package fails.

I forced the material update. For my use cases of this package, I do not seem to have any issues aside from the install failure.

Losing selection of lazy loaded items

I've modified your stackblitz so the loaded items are reset every time the select opens:

https://stackblitz.com/edit/ng-mat-select-infinite-scroll-zbykih?file=src%2Fapp%2Fapp.component.html

Now when you open the select, check any lazy loaded option, reopen it and select the first one, the last selection gets lost since it is no part of the available elements anymore. I've also reported this issue here bithost-gmbh/ngx-mat-select-search#320 since they already needed to take care of this behavior with their filter. But I think this issue is rather infinite-scroll related.

Search is missing (unable to search) and select scroll issues.

Hello HaidarZ,

I have used your plugin and it working fine but having one issues in scrolling time with keyboard down button,
once we select any item from list and again open the drop-down and scroll down with keyboard down key moving down but as soon as new data attaching the focus move to previous selected option ,
so again to move down need to come from there..

First image i selected and open the dropdown ,
second image is i moved down and data loaded and my focus back to top where i selected.

Thanks
LK.

Angular 16 support

While upgrading to Angular v16 the following error was thrown:

version 4.0.0 doesn't work with Angular 12.

Hi there,

When i put the module into my project i get the error below. When i downgrade to 3.0.0 the error disapears, but then the scrolling doesn't work.

Is there some compatibility issue here ? or is there something that i'm doing wrong?.

TypeError: Cannot create property 'message' on string 'c:\src\angular\new-frontend-v12\node_modules\ng-mat-select-infinite-scroll\fesm2015\ng-mat-select-infinite-scroll.mjs: This application depends upon a library published using Angular version 14.1.3, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
70 | }
71 | MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });

72 | MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 });
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
73 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
74 | type: Directive,
75 | args: [{'
at run (c:\src\angular\new-frontend-v12\node_modules@babel\core\lib\transformation\index.js:37:15)
at run.next ()
at Function.transform (c:\src\angular\new-frontend-v12\node_modules@babel\core\lib\transform.js:25:41)
at transform.next ()
at step (c:\src\angular\new-frontend-v12\node_modules\gensync\index.js:261:32)
at c:\src\angular\new-frontend-v12\node_modules\gensync\index.js:273:13
at async.call.result.err.err (c:\src\angular\new-frontend-v12\node_modules\gensync\index.js:223:11)
at c:\src\angular\new-frontend-v12\node_modules\gensync\index.js:37:40

Module is not installing with Azure Pipelines after the update version 1.2.0 is released on npm.

After this library was updated on npmjs.org yesterday, it is not being installed in our CI process and we're getting the error - Cannot find module 'ng-mat-select-infinite-scroll'.

missing exported member when building application

I'm getting the following error message when building my application after adding infinite scrolling:

Error: node_modules/ng-mat-select-infinite-scroll/lib/mat-select-infinite-scroll.module.d.ts:7:21 - error TS2694: Namespa
ce '"C:/terrazo_webui/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

7     static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectInfiniteScrollModule>;
                      ~~~~~~~~~~~~~~~~~~~~~

There are some other Errors like that.

I use these versions so it should work:

"@angular/cdk": "^11.2.0",
"@angular/core": "^11.2.0",
"@angular/material": "^11.2.0",
"rxjs": "^6.6.3",

Someone experienced this issue already?

Add a license?

This repo currently has no LICENSE, which is preventing us from listing it on https://devlibrary.withgoogle.com/ (and generally preventing people from using it confidently)

is it posssible to add search functionality with select

is it posssible to add search functionality with select