Issue with Ace Editor Search Box Events

[WebDesignWorx]

Hello.
I am currently working on implementing a custom toolbar for the Ace editor, and I am encountering difficulties with handling events related to the search box. The objective is to update a button's styling when the search box is hidden, regardless of how it was hidden.

Here's the pseudocode of my current implementation:

let searchBtn = $("a[data-ace-action='search']");  // my magnifying-glass btn that should be .active or '' respectively 
let searchActive = false;

// Click handler
searchBtn.on("click", toggleSearch);

// Keyboard shortcut handler
editor.commands.addCommand({
  name: 'search',
  bindKey: 'Ctrl-F',
  exec: toggleSearch
});

// Check if search box exists before attaching event listener
if (editor.searchBox) {
    console.log('searchBox is available ');

    // Event listener for search box hide event
    editor.searchBox.on('hide', function () {
        console.log('hiding');
        // Update button styling
        searchBtn.removeClass('active');
        searchActive = false;
    });
}

function toggleSearch() {
    if (searchActive) {
        editor.searchBox.hide();
    } else {
        editor.execCommand('find');
    }
    searchActive = !searchActive;

    // Update button styling
    if (searchActive) {
        searchBtn.addClass('active');
    } else {
        searchBtn.removeClass('active');
    }
}

The issue is that the 'hide' event is not being triggered as expected, and no events are logged when the search box is visible. I've consulted the documentation and attempted to inspect the source code, but couldn't find a suitable event for detecting when the search box is hidden.

Could you please provide guidance on the correct event or method to achieve this functionality, or suggest an alternative approach?

Thank you for your assistance!