UXP (IDJS) AddEventListener to Dropdown in Dialog

Hi everyone,

this is my first post on the forums, welcome!

I've been tinkering with the new UXP javascript in InDesign for the last few days and have a question about events.

I have a simple dialog box with a dropdown. When user selects a value in this dropdown I would like to do something else. I've tested all documented events but cannot get by handler being called.

Here's my code:

myDialog();

function myDialog() {
    var myDialog = app.dialogs.add();

    with (myDialog) {
        with (dialogColumns.add()) {
            with (dialogColumns.add()) {
                with (dialogRows.add()) {
                    var dropdown = staticTexts.add({ staticLabel: "Dropdown:", minWidth: 100 });
                    var fieldSelection = dropdowns.add({
                        stringList: ["Description", "Title", "Page"],
                        selectedIndex: 0
                    });

                }
            }
        }
    }

    console.log('Right before attaching the EventListener.');
    dropdown.addEventListener('beforePlace', 'onDropdownChange');
    dropdown.addEventListener('afterPlace', 'onDropdownChange');
    dropdown.addEventListener('afterLinksChanged', 'onDropdownChange');
    dropdown.addEventListener('afterNew', 'onDropdownChange');
    dropdown.addEventListener('beforeDelete', 'onDropdownChange');
    dropdown.addEventListener('afterDelete', 'onDropdownChange');
    dropdown.addEventListener('beforeUpdate', 'onDropdownChange');
    dropdown.addEventListener('afterUpdate', 'onDropdownChange');
    dropdown.addEventListener('beforeEmbed', 'onDropdownChange');
    dropdown.addEventListener('afterEmbed', 'onDropdownChange');
    dropdown.addEventListener('beforeUnembed', 'onDropdownChange');
    dropdown.addEventListener('afterUnembed', 'onDropdownChange');
    dropdown.addEventListener('beforeMove', 'onDropdownChange');
    dropdown.addEventListener('afterMove', 'onDropdownChange');
    dropdown.addEventListener('onInvoke', 'onDropdownChange');
    dropdown.addEventListener('beforeInvoke', 'onDropdownChange');
    dropdown.addEventListener('afterInvoke', 'onDropdownChange');
    dropdown.addEventListener('beforeDisplay', 'onDropdownChange');
    dropdown.addEventListener('beforeQuit', 'onDropdownChange');
    dropdown.addEventListener('afterQuit', 'onDropdownChange');
    dropdown.addEventListener('afterContextChanged', 'onDropdownChange');
    dropdown.addEventListener('afterSelectionChanged', 'onDropdownChange');
    dropdown.addEventListener('afterSelectionAttributeChanged', 'onDropdownChange');
    dropdown.addEventListener('beforeDeactivate', 'onDropdownChange');
    dropdown.addEventListener('afterActivate', 'onDropdownChange');
    dropdown.addEventListener('afterOpen', 'onDropdownChange');
    dropdown.addEventListener('beforeClose', 'onDropdownChange');
    dropdown.addEventListener('afterClose', 'onDropdownChange');

    if (myDialog.show() == false) {
        myDialog.destroy();
        return;
    }
}

function onDropdownChange(e) {
    console.log('Dropdown has changed.');
}

Code is in /Users/<my-username>/Library/Preferences/Adobe InDesign/Version 18.0/de_DE/Scripts/Scripts Panel/my-scripts/dialog.idjs

I'm tailing the log files in Terminal from /Users/<my-username>/Library/Caches/UXPLogs to see the console.log() output.

My InDesign version is 18.0 on OSX 12.6.1