What event fires after you click on but select no option? Asked Jul 02 '20 at 23:24 Active Jul 03 '20 at 09:32 Viewed 863 times 4 0 I'm trying to trigger a cleanup function after <select> is opened, but no option is selected and the user clicks away. I tried change and blur, but none of them fire. Sample and visuals const select = document.querySelector('select'); select.addEventListener('blur', () => { console.log('blur'); }); <select> <option>one</option> <option>two</option> <option>three</option> </select> I click on the <select> and then without selecting an option, I click outside of it. The blur event is not triggered until I do a second click after the first outside click. javascript html edited Jul 03 '20 at 06:06 CodeBug 1,649 1 8 23 asked Jul 02 '20 at 23:24 Morgan Wilde 16,795 10 53 99 As far as i read from here it's not possible.. https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due – halilcakar Jul 02 '20 at 23:32 `blur` seems to work in Chrome.. – Keith Jul 02 '20 at 23:34 The `change` event will not fire unless an option is selected if you want to fire an event on open then use `focus` event on open and `blur` event on close. – Hassan Azzam Jul 02 '20 at 23:38 1 Have you tried the `click` event? – Scott Marcus Jul 02 '20 at 23:41 1 Can you describe more precisely what you want to do? – djcaesar9114 Jul 02 '20 at 23:41 This seems a bit nebulous... Can you provide a snippet of your code? There's a few ways to approach this but it's based on browser. If you have those specs as well, that would be also be helpful – Dom Jul 03 '20 at 00:30 1 @Dom Thanks for the comment, I've reduce the nebula cloud a bit, hopefully, by adding a code sample and screenshots. – Morgan Wilde Jul 03 '20 at 05:32 Are you sure you want to do this? As an user, I **will** expect that the last option I have selected stays selected if I ever do this operation. If an UI were to clear my input when doing this I'd either fill a bug report if I really like the service, or simply stop using the service. Not to mention that it will probably be impossible to get anything cross-browser (for instance I have no idea how screen-readers do render , but I doubt it will fire anything you could be waiting for). – Kaiido Jul 03 '20 at 07:47

Answer 1

There's no such event that signifies that the <select> is opened, but no option is selected and the user clicks away.

However, for <select> element, you can bind to click event which does not warrant the selection of an option to fire and write custom logic. I just noticed that it requires 2 clicks on <select> element for an option to be selected and for opening it only needs 1 click. With the click count, we can determine if the preconditions meet and accordingly run the cleanup code:

var clicks = 0,
    $select = document.getElementById('select');
$select.onclick = function() {
  clicks++;

  if (clicks === 2) {
    clicks = 0;
  }
};
$select.onblur = function(e) {
  if (clicks === 1) {
    clicks = 0;

    // SELECT WAS OPENED BUT NO OPTION SELECTED
    // CLEANUP CODE GOES HERE

    console.log('CLEAN UP');
  }
};

<select id="select">
  <option>A</option>
  <option>B</option>
</select>

Like @leisheng and @Kaiido suggest, this is not universal solution and will only work with desktops and mouse.

Answer 2

As far as what events occur when you open a select menu there are many. There may very well be a way to create your own CustomEvent and fire it by tracking the other events. If you can see what events are happening, you might be able to figure something out. This is a script I use to find all events that are occurring on an EventTarget:

EventTarget.prototype.__original_addEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(listener, callback) {
    if (listener === 'event') {
        for (let key in this) {
            if (key.startsWith('on')) {
                let eventName = key.substr(2, key.length);
                this.__original_addEventListener(eventName,
                function(e) {
                    callback(e);
                });
            }
        }
    } else {
        this.__original_addEventListener(listener, callback);
    }
};

window.onload = function() {
    document.querySelector('#id-of-my-select-tag').addEventListener('event', (e) => {
        console.log(e.type);
    });
};

This just allows you to add a listener called 'event' which captures all events. This will output all the events happening and maybe you will see a pattern that helps you write some code to detect when it is open based on the events that occurred and the order in which they occurred. (Tested in Firefox, Chrome and Edge)