HTML `<select>` element not triggering `change` event when selected programmatically in Safari
I'm working with a puzzling scenario when trying to programmatically change the value of an HTML `<select>` element in Safari. I have the following code that sets the value based on a user action and then attempts to trigger the `change` event manually: ```javascript const selectElement = document.getElementById('mySelect'); selectElement.value = 'option2'; // Setting value programmatically const event = new Event('change', { bubbles: true }); selectElement.dispatchEvent(event); // Dispatching change event ``` However, in Safari (version 16.0), it seems the `change` event doesn't fire, which prevents the associated event handlers from executing. I've ensured that the select element has options with the corresponding values and that the event listeners are correctly attached prior to dispatching the event: ```javascript selectElement.addEventListener('change', function() { console.log('Change event fired!'); }); ``` When I run this code, I see the console log in Chrome and Firefox, but not in Safari. I even tried wrapping the value assignment in a `setTimeout` to allow the DOM to settle, but that didn't help either. I've gone through various documentation but couldn't find anything specific regarding this behavior in Safari. Is there a known workaround or a best practice for ensuring that programmatically changing the value of a `<select>` element correctly triggers the `change` event in Safari? Any insights would be greatly appreciated! I'm on macOS using the latest version of Javascript.