We have a scenario where the options of a fw-select element are dynamically populated based off of other fields. However, when we set the options property on the fw-select element, the specified fw-select-option elements do not created. However, when the operation runs under 50 ms of page load, the fw-select operates as expected. Listed below is a simplified recreation of the issue. The expected behavior of the below code is for the dropdown to have three values: Luffy, Zorro, and Sanji. What is currently happening is the dropdown contains no fw-select-options.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/@freshworks/crayons@v3/dist/crayons/crayons.esm.js"></script>
<script nomodule src="https://unpkg.com/@freshworks/crayons@v3/dist/crayons/crayons.js"></script>
</head>
<body>
<fw-select name="complexSelect" label="Strawhat Pirates" multiple></fw-select>
<script>
setTimeout(function () {
document.querySelector('[name="complexSelect"]').options = [
{
value: '1',
text: 'Luffy'
},
{
value: '2',
text: 'Zorro'
},
{
value: '3',
text: 'Sanji'
},
];
}, 1000);
</script>
</body>
</html>