Issue with the crayons multi-select dropdown

Product
, , ,
1

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) {
    $('.adminSection').empty();
    $('.agentSection').empty();
    let adminSelect = generateMultiSelect('Admin Roles', 'Choose the choice for Admin', 'adminRoles', roles);
    let agentSelect = generateMultiSelect('Agent Roles', 'Choose the choice for Agent', 'agentRoles', roles);
    $('.adminSection').append(adminSelect);
    $('.agentSection').append(agentSelect);
    if (presetdata && 'adminRoles' in presetdata) {
        setTimeout(() => {
            $('.adminRoles').val(presetdata.adminRoles);
            $('.agentRoles').val(presetdata.agentRoles);
        }, 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?

Thanks,
Akhil Moningi

3

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

1 Like
4

H

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

<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@3.4.0-beta.0/dist/crayons/crayons.js"
></script>

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.
5

Hi.

Any update on this?