Issues with manipulating a drop down in Javascript

I’m currently using vanilla JS to match a given string, and then populate a drop down based on the match. I want to be able to click the drop down once to populate the drop down, but I currently have to click twice to then select the option, which would then add the same entries again (which isn’t so much of an issue as once an option was selected, I can always reset the length to 0 so the user would likely not notice). I was thinking perhaps I need two event listeners instead of one but unsure of what direction to go or perhaps a "clickdown" and "clickup" event (if they even exist for mouse clicks?).

I’m still very much a beginner and not sure if what I am wanting to achieve is possible in one click or perhaps my approach is incorrect, so any pointers would be great.

document.getElementById('form').addEventListener('click', function() {
    function addType(mactype) {
        var type = document.getElementById('mode');
        var option = document.createElement('option');
        option.text = mactype;
        type.add(option);
    }
    var macinput = MACinput.value;
    var macoutput = MACoutput.value;
    if (macinput.length > 0) {
        var pattern = new RegExp("....-....-....");
        if (pattern.test(macinput) == true) {
        addType("Huawei -> Colon");
        addType("Huawei -> HP");
        addType("Huawei -> String");
    }
}