Editor singleSelect with collectionAsync not work's

[dzurrahman]

Describe the bug

im just upgrade version angular from 16 to 18, and upgrade angular-slick grid into latest version,

singleSelect dropdown item wont works with collectionAsync item's

only work's with basic collection

here's my code with collectionAsync

Reproduction

-

Expectation

should be show the list

Environment Info

"@angular/animations": "18.1.2",
"@angular/cdk": "18.1.2",
"@angular/common": "18.1.2",
"@angular/compiler": "18.1.2",
"@angular/core": "18.1.2",
"@angular/forms": "18.1.2",
"@angular/platform-browser": "18.1.2",
"@angular/platform-browser-dynamic": "18.1.2",
"@angular/router": "18.1.2",
"@ionic/angular": "8.2.6",
"@ionic/core": "8.2.6",
"angular-slickgrid": "8.6.1"

Validations

• [x] Follow our Code of Conduct
• [x] Read the HOWTO - Quick Start.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[zewa666]

can you show what the collection variable is?

just to make sure it matches what is expected as described here https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/filter-intro/select-filter#collection-async-load

[dzurrahman]

collection is observable, for example i used of from rxjs

of([
    { value: 'Y', label: 'Yes' },
    { value: 'N', label: 'No' },
  ]);

[dzurrahman]

ah, that's the problem, collectionAsync no longer compatible with Observable, thanks @zewa666 .

[ghiscoding]

collectionAsync always supported Promise & Observable, Example 3 has it connected a http.fetch which is an Observable and it works fine. I have many projects to support and not all frameworks have Observable, so it's probably just a matter of updating the docs (which I just did) to say it does support both Promise & Observable. If you have any problems with collectionAsync and Observable, you need to provide a full repro there's a Stackblitz link on the main readme homepage, otherwise I won't help. Make sure that the collection is really defined as an Observable when it execute that lines of code and not null or undefined, which could explain why it's empty

https://github.com/ghiscoding/Angular-Slickgrid/blob/5613f28f736acca90b8597097b48c6e0b9f9b802/src/app/examples/grid-composite-editor.component.ts#L312-L329

and here's the unit test for this feature

https://github.com/ghiscoding/Angular-Slickgrid/blob/5613f28f736acca90b8597097b48c6e0b9f9b802/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts#L773-L786

[ghiscoding]

I came back and tested collectionAsync with an of Observable and it works fine, so as I mentioned above, just make sure that the input is in fact not null or undefined when applying the column definitions (that is when executing the getDropdownConfig() function).

filter: {
  model: Filters.singleSelect,
  enableCollectionWatch: true,
  customStructure: { value: 'value', label: 'label' },
  collectionAsync: of([
    { value: 'Y', label: 'Yes' },
    { value: 'N', label: 'No' },
  ])
}

There's also a couple of things that I'd like to mention after seeing the code you provided

1. an editor can only accept a filterOptions and seeing that you also provided an editorOptions is in fact wrong
2. the option customStructure should only be used when you want to override it with something other than value/label, you are overriding it with the default, so there's no need to provide it in your case
3. type: FieldType.text is the default, so there's also no need to provide that one either
4. your function getDropdownConfig should really return a Column type which would have detected the some of the error above