Javascript:How to trigger input field to simulate change after dynamically inputting value?

I am triggering a modal on Swagger UI page load then setting the value of input field of Bearer token and then wish to click on the 'Authorize' button programmatically to close the bearer token modal(Screenshot below).But the button seems disabled and unless I manually type something in the input it does not get enabled.What could be the issue?

   window.addEventListener('load', function() {
    
        // On Load triggers Modal Popup
        const authorizeButton = document.getElementsByClassName('authorize')[0];
        authorizeButton.click();
    
        //Set Input Field
        const abcd = document.querySelectorAll('[aria-label="auth-bearer-value"]');
        abcd[0].value = 'abcd';
    
        abcd[0].dispatchEvent(new Event('change'));
        abcd[0].dispatchEvent(new Event('keydown'));
        abcd[0].dispatchEvent(new Event('keypress'));
        abcd[0].dispatchEvent(new Event('keyup'));
        abcd[0].dispatchEvent(new Event('input'));


       // Need to Click on 'Authorize' button as shown in sc开发者_运维百科reenshot but it seems to be disabled
}