fwChange event getting triggered when setSelectedOptions Event is used

App Platform
1

Hi Team,

I have been facing an issue with fw-select dropdown select element. I have a change event registered on the element.

When the app loads for the first time I create a dynamic select option, set the value to the element, and based on the business logic I set the value of the select to be empty or a pre-selected value.

The issue is when the above happens. The fwChange event gets triggered automatically which should not be the case. The event should only be triggered when the user selects the option not when the dropdown is updated programmatically.

const vendorsDrp = document.getElementById("vendorsList");

vendorsDrp.options =  [ { "value": "1841299", "text": "BMW" }, { "value": "271982", "text": "Audi" }]

vendorsDrp.setSelectedOptions = [{ "value": "1841299", "text": "BMW" }];

vendorsDrp.addEventListener("fwChange", (e) => {
  console.log("--- Change event triggered ---");
});

I’m using crayons V4. Please let me know if there is an alternative way or if I am missing something here. Thank you

2

Hi team, Can someone help with this please it’s critical. Thank you

3

Hi @mohammed

Basically, the fwChange event is triggered for every change in the dropdown values, whether the change is made by the user or programmatically. This behavior is inherent to the fwChange event.

4

Hello @Kithiyon,

Thanks a lot for your reply. But if I need to set a selected value after dynamically adding the options to select how should I do it without triggering the fwChange event?

5

Hey @mohammed

There is no straightforward workaround to restrict the fwChange event from triggering. However, you can control its execution by introducing a flag variable. By setting this variable to true when you want the code inside the fwChange callback to run, and false when you want to skip the execution, you can effectively manage when the event’s logic is applied. This approach allows you to selectively handle the event based on your specific conditions, providing more control over its behavior.

Hello @Raviraj , please correct me if I’m wrong.

6

Hello @Kithiyon

Thank you for your suggestion. I implemented it as you had mentioned. The only thing is that I have many dropdowns I need to control and having flags for each makes the code messy and harder to maintain.

I will stick with this as a temporary fix. Thanks again for your comments.