//Also See select.blade.php

$( function() {
    $(".select-menu").selectmenu({
        width: '100%',
        create: function ( event, ui ) {
            buttonId = this.id + '-button';
            menuId = this.id + '-menu';
        },
        open: function ( event, ui ) {
            let button = document.getElementById(this.id + '-button');
            let menu = document.getElementById(this.id + '-menu');
            menu.style.width = button.offsetWidth + 'px';
            menu.parentNode.style.width = button.offsetWidth + 'px';
            button.classList.add('dropdown-open');
        },
        change: function( event, ui ) {
            let button = document.getElementById(this.id + '-button');
            let buttonText = button.querySelector('.ui-selectmenu-text').innerHTML;
            button.querySelector('.ui-selectmenu-text').innerHTML = buttonText.replace(/ /gi, '');
        },
        close: function ( event, ui) {
            let button = document.getElementById(this.id + '-button');
            button.classList.remove('dropdown-open');
        }
    });
});