Issue with the crayons multi-select dropdown

Hi Team,

We are using the crayons fw-select element to create a multi-select dropdown and then selecting some options using the below code.

function appendRoles(roles, presetdata) {
    let adminSelect = generateMultiSelect('Admin Roles', 'Choose the choice for Admin', 'adminRoles', roles);
    let agentSelect = generateMultiSelect('Agent Roles', 'Choose the choice for Agent', 'agentRoles', roles);
    if (presetdata && 'adminRoles' in presetdata) {
        setTimeout(() => {
        }, 100);

function generateMultiSelect(label, placeholder, className, optionsArray) {
    let multiSelect = `<fw-select label="${label}" class="${className}" placeholder="${placeholder}" multiple>`;
    for (let items in optionsArray) {
        multiSelect += `<fw-select-option value="${optionsArray[items].id}">${optionsArray[items].name}</fw-select-option>`
    multiSelect += `</fw-select>`;
    return multiSelect;

Initially, this above code worked as expected to select the options dynamically, but now it is not working.
When I set 300 instead of 100 in the setTimeout() method, it is working.
May I know the reason for this?

Akhil Moningi

Hi Akhil,
We are looking into this and will get back to you shortly.

1 Like


ANy updates regarding this issue? Am stuck on a similar issue and it looks like the either the documentation (Select (fw-select) | Crayons)

is wrong or that something else is going on.

Am trying to inject the fw-select tag on a custom installation page built in a react app.

Did, fins this answer (fw-select-datasource - CodeSandbox) which is working in that environment.

When using this version


no dropdown is added.

When using the version that should be used

dropdown is added however, but it is empty.

My code that injects value to the dropdown look slike this:

let rolesDropDown = document.getElementById('roles');
const roles = await getRolesForAccount();
rolesDropDown.options = roles;
console.log(rolesDropDown.options); NOTE that rolesdropdown.options is an array of objects such as the in the documentation on the website.