bug: When two gcds-selects are placed on the same page and accessing the same list of elements, one of the lists loses its list items/values and becomes empty.

[dark-creaters]

Prerequisites | Prérequis

• [X] I have read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• [X] I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• [X] I have searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

0.22.0

Current Behavior | Comportement observé

When two gcds-selects are placed on the same page and accessing the same list of elements, one of the lists loses its list items/values and becomes empty. To reproduce Demo

1. Create two gcds-select fields with all the required properties/attributes
2. Populate the two gcd-selects with the same list of items
3. Now, launch the app and navigate to the page containing these two selects
4. Try to select an item in the first select option, notice that the list of items in the first select is empty. However, the second select option still has its list values. Also, after some number of attempts the first select option may regain its values

Note: The issue becomes more noticeable when the throttling option in DevTools is set to 3G mode. It is even more obvious when the page is quickly refreshed.

Expected Behavior | Comportement attendu

The content of the gcds-select should always maintain its list and should always be available for selection.

System Info | Information sur le système

Vue 3.4. Observed in Edge and chrome on Windows.

Steps to Reproduce | Étapes pour reproduire le bogue

To reproduce [Please review the stackblitz here](https://stackblitz.com/edit/dfo-gcds-vue-testrig-ajcamr?file=README.md)

1. Create two gcds-select fields with all the required properties/attributes
2. Populate the two gcd-selects with the same list of items
3. Now, launch the app and navigate to the page containing these two selects
4. Try to select an item in the first select option, notice that the list of items in the first select is empty. However, the second select option still has its list values. Also, after some number of attempts the first select option may regain its values

Code Reproduction URL | URL de reproduction du code

https://stackblitz.com/edit/dfo-gcds-vue-testrig-ajcamr?file=README.md

Additional Information | Informations supplémentaires

Thanks a lot for the great work!

[theonlyguills]

Hey,

I would like to add, it's not adding 2 gcds-select it's just the fact that it's somehow not reactive to the data being loaded. Adding a v-if="isDataLoaded" to the gcds-select and setting that to true when the data is done loading will make it behave as expected.

In the stackblitz above if you just keep refreshing the page you will encounter it at times, more often if you throttle down to 3G.

[adorayi]

Check after Setncil update if this is fixed.