Facet empty list when creating a Product

[Swampy469]

Describe the bug
When you're in the process of creating a new product and adding facets to it, you might notice that upon selecting a facet, it doesn't immediately appear in the 'local' chip list. However, rest assured that this is just a temporary display issue. The facets you've selected will become visible in the chip list after the product is either created or edited.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Inventory'
2. Click on 'New Product'
3. Press 'Add facets'
4. Select one facet
5. Press 'Add facets button’
6. No facets are showed in the list

Expected behavior
After the selection of the facet I expect to see what I choose before the creation of the product, like the edit view after the creation.

Environment (please complete the following information):

• @vendure/core version: 20.6
• Nodejs version: 18.16.1
• Database (mysql/postgres etc): postgres

Additional context
I am using the Multi Vendor plugin, the user used is a new Seller (no superadmin).

[hieundtlu]

Hi @michaelbromley , This is an urgent issue.

I'm not familiar with rxjs, but it seems on Create Screen, entity is empty, and it couldn't listen formFacetValueIdChanges$. I changed ngOnInit as below, and it worked. Please review my solution!

    ngOnInit() {
        this.init();
        const productFacetValues$ = this.entity$.pipe(map(product => product.facetValues));
        const productGroup = this.detailForm;
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const formFacetValueIdChanges$ = productGroup.get('facetValueIds')!.valueChanges.pipe(
            distinctUntilChanged(),
            switchMap(ids =>
                this.dataService.facet
                    .getFacetValues({ filter: { id: { in: ids } } })
                    .mapSingle(({ facetValues }) => facetValues.items),
            ),
            shareReplay(1),
        );
        this.facetValues$ = formFacetValueIdChanges$;
        this.productChannels$ = this.entity$.pipe(map(p => p.channels));
    }