Unable to add class name or id to the fw-select-option

Heya! I am playing around with Crayons to match our product UI for an app which I am building and I tried adding an id for each of the fw-select option, but it doesn’t seem to get reflected when the HTML gets rendered. I am also unable to add a class name as well for the same.

Code Snippet:

let multiSelect = `<fw-select id = 'options' multiple>`;
for (let i = 0; i < options.length; i++){
     if (['requester', 'agent'].includes(options[i].name)){
        continue;
     }
     if (!(options[i].default_field)){
        options[i].name += '_cf';
     }
     multiSelect += `<fw-select-option class="option${i}" id="${i}" value="${options[i].name}"> ${options[i].label} </fw-select-option>`
}
$('.selectOptions').append(multiSelect);

HTML rendering:

And also there isn’t any method to get the text value of that particular option, so i’ve used a work-around by adding it to the value using the delimiter(’|’). So if there is any way to access the text, do let me know about that as well.

Thank you in advance :))

2 Likes

Hey,

First of all welcome to the Freshworks Developer Community! :smile:

Unfortunately, due to the nature of web components and also partially due to design, we don’t allow customizing CSS and the components strictly follow the Freshworks Design System.

However, we are ready to open up necessary CSS properties via CSS variables as and when needed.
If you could share the customizations that are needed, we can see what properties can be opened up.

With respect to getting the text from select components, there is an issue already open at [Enhancement] - Expose `text` in fw-select · Issue #125 · freshworks/crayons · GitHub. You can follow this issue and you will be notified when it releases.

Thanks.

2 Likes

Hey, I don’t want to edit the css properties of the dropdown. I would just like to be able to add id and class to the fw-select-option as I want to trigger changes to that particular dropdown option based on certain conditions. (For example, having two dropdown boxes, and disabling the option, which has been selected in the first dropdown box, in the second dropdown box.)

Functionality like this: As you can see that I have selected status in the first dropdown, it has been disabled in the second dropdown. This can be achieved if i can add classes and id to the fw-select-option.
Screenshot 2020-12-04 at 8.37.29 PM

1 Like

Understood your concern and it’s a valid feature. Can you just log this as an enhancement on the Crayons Github Repo so that we can work on this?

Thanks

4 Likes

I’ve added it Github! Thank you. :))

2 Likes

For the followers of this thread looking for Github repository - Issues · freshworks/crayons · GitHub