ng-select button opens file system dialogue twice

Question

So I am tracking down a bug that I can't quite get a handle around. The problem is this, if you have a button with ng-select on it, unfocus the browser (click on desktop) and then double click on the button, it opens up the browser file system dialogue twice, throwing away the first input. The question is how to force it to only ever open the file dialogue once.

The relevant code:

<!-- Table Buttons -->
<div class="container dashboard__table__action-items-container" ng-if="user.Welcomed">
    <button class="btn btn-primary" ngf-select="onFileSelect($files)" ngf-multiple="true" style="margin-right: 15px;">
        <i class="fa fa-cloud-upload fa-3" style="margin-right: 4px"></i> Upload Meeting
    </button>

...     

</div>

Edit: I tested this behavoir with several browsers and it doesn't happen (firefox, safari, opera). This only happens on chrome. Version for ng-file-upload is 12.2.9, chrome Version 52.0.2743.116.

Answer 1

So I ended up "solving" this by hacking around it, but I still think it is a bug with chrome and/or ng-file-select. For posterity, if you wrap the button in a div that has the ngf-select, you can manually debounce the event propagation.

Relevant code:

html:

<div ngf-select="onFileSelect($files)" ngf-multiple="true" style="width: 0;">
    <button class="btn btn-primary" ng-click="debounceMeetingCreation($event)" style="margin-right: 15px;">
        <i class="fa fa-cloud-upload fa-3" style="margin-right: 4px"></i> Upload Meeting
    </button>
</div>

in the controller:

var meetingCreationClicked;
$scope.debounceMeetingCreation = function ($event) {
    if (meetingCreationClicked) {
        $event.preventDefault();
        $event.stopPropagation();
        return false;
    }

    meetingCreationClicked = true;

    $timeout(function(){
        meetingCreationClicked = false;
    }, 1000);
};