Combobox does not fire an "on change"

[mdurchholz]

I am attempting to add a custom "on change" event listener to this component and am noticing that there is nothing that triggers a change event after the component is updated. I do see that the hidden select element does change, but nothing is triggering an event. Maybe I am missing something in the documentation, but is there a way to fire a callback function after the component value is updated?

[mcking65]

@mdurchholz

Please provide the URL of the page about which you are inquiring.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Combobox change event question.

The full IRC log of that discussion

<jugglinmike> Topic: Combobox change event question
<jugglinmike> github: https://github.com/w3c/aria-practices/issues/3095
<jugglinmike> Adam_Page_: If I'm understanding correctly, the reporter is using the combobox pattern, but they want an "onchange" event that they would get with a standard "select" element
<jugglinmike> Matt_King: But we would only do that if we were writing the combobox code to be reusable
<jugglinmike> Adam_Page_: Right--if, for instance, we wanted our own example to take advantage of such an event
<jugglinmike> Matt_King_: That was my gut instinct on how to respond
<jugglinmike> Zakim, end the meeting

[mdurchholz]

@mcking65 - I can provide the source link: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

There is no "on change" method for this component...

However, this being said, I think I have found a work around. In my instance, I loop through all of my select elements and am using Javascript to create the options array that this plugin needs to initialize (along with building the necessary parent HTML). From there, I am extending the "selectOption" method where I create an "on change" event listener for my hidden select element. Below is a dev URL where you can see my instances:

https://moveodev.com/delta-dental/components/styleguide/#combobox

Here is some code to show you how I have accomplished this:

var js_select = new Select(div_wrap, options);

js_select.selectOption = (function( original )
{
    return function( index )
    {
        original.call(this, index);

        el.selectedIndex = index;

        var value = el.value;

        onChange(el, index);

        var event = new CustomEvent("change", {
            bubbles: true,
            cancelable: true,
            detail: { value },
        });
    
        el.dispatchEvent(event);
    };
})(js_select.selectOption);