Categories are not displaying properly on /libs/commerce/gui/components/common/cifcategoryfield component after 20 categories are added

[ulisespulido]

Expected Behaviour

We should be able to see the category names displaying properly when selecting more than 20 items using the /libs/commerce/gui/components/common/cifcategoryfield picker, this is to avoid confusion about what items have been selected already for that particular picker.

Actual Behaviour

Red values are displayed for items beyond selecting 20 items in category picker making them difficult to be identified.

Reproduce Scenario (including but not limited to)

Create a dialog using the /libs/commerce/gui/components/common/cifcategoryfield Category Picker,
Select more than 20 categories

Steps to Reproduce

Create a dialog using the /libs/commerce/gui/components/common/cifcategoryfield Category Picker,
Select more than 20 categories
review that after 20 items categories display in red.

Platform and Version

AEM as a Cloud Service using the latest commerce-cif-connector 1.8.1

Sample Code that illustrates the problem

No code but after taking a look at the request made to grab the details we can see there is a limit on the amount of items to retrieve using the GraphQL endpoint as follows where we see by default there is a limit on the pageSize of 20 items.

https://<aem_host_url>/api/graphql?query=query+categoryList($filters:CategoryFilterInput!$pageSize:Int=20$currentPage:Int=1){categories(filters:$filters+pageSize:$pageSize+currentPage:$currentPage){items{id+image+name+uid+url_key+url_path+__typename+children_count}__typename}}&operationName=categoryList&variables={"pageSize":20,"currentPage":1,"filters":{"category_uid":{"in":["OTgy","OTg1","OTg4","OTkx","OTk0","OTk3","MTAwMA==","MTAwMw==","MTAwNg==","MTAxNQ==","MTAyMQ==","MTAyNA==","MTAyNw==","MTAzMA==","MTAzNg==","MTAzOQ==","MTA0Mg==","MTA0NQ==","MTA1NA==","MTA1Nw==","MTA2MA==","MTA2Mw==","MTA2OQ==","MTA3NQ==","MTA3OA==","MTA4NA==","MTA4Nw==","MTA5MA==","MTEwNQ==","MTEwOA==","MTExMQ==","MTExNw==","MTEyMA==","MTEyMw==","MTEyOQ==","MTEzMg==","MTEzNQ==","MTEzOA==","MTE0MQ==","MTA5Ng==","MTE1OQ==","MTE2Mg==","MTE2NQ==","MTE2OA==","MTE0Nw==","MTE3NA==","MTE3Nw==","MTE4MA==","MTE4Ng==","MTE4OQ==","MTE5NQ==","MTE5OA==","MTIwMQ==","MTIwNA==","MTIwNw==","MTIxNg==","MTIxOQ==","MTIyMg==","MTIyNQ==","MTIyOA==","MTIzMQ==","MTI0MA==","MTI0Mw==","MTI0Ng==","MTI1NQ==","MTI1OA==","MTI2NA==","MTI2Nw==","MTI3MA==","MTI3Mw==","MTI3Ng==","MTI3OQ==","MTI4Mg==","MTI4NQ==","MTI5NA==","MTMwMA==","MTMwMw==","MTMwNg==","MTMwOQ==","MTMxMg==","MTMxNQ==","MTMyMQ==","MTMyNA==","MTMzMA==","MTMzMw==","MTM0Mg==","MTM0NQ==","MTM0OA==","MjY3MQ=="]}}}

Logs taken while reproducing problem

No logs