CODEWITHSUNDEEP
javascriptjqueryangularjsbrowserangularjs-directive
bschmitty
bschmitty

Reputation: 1218

Calling Angular controller function with ng-mousedown nested inside button in IE and Firefox

I have a component that is a button used to open and close a dropdown element, and the option for the user to clear the selected items in the dropdown, when a ng-model value is present, as follows:

<button class="btn btn-default form-control" type="button" ng-click="ctrl.toggleDropdown($event)" ng-keydown="ctrl.onKeyboardPressed($event)" ng-mouseenter="icon=true" ng-mouseleave="icon=false">
        <span ng-if="ctrl.ngModel !== null" >
            {{ctrl.ngModelValue ? ctrl.ngModelValue : ctrl.placeholder}}
            <i class="removeSelectionIcon" ng-class="{'fa fa-close' : icon}" ng-mousedown="ctrl.clearSelection($event)"></i>
        </span>
</button>

To keep it brief, when a user clicks on the "fa fa-close" icon via ng-mousedown, I need to fire the function below:

 function clearSelection($event) {
        console.log("hey there");

        this.ngModel = null;
        this.ngModelValue = "";

        $event.preventDefault();
        $event.stopPropagation();
    }

All works great in Chrome, but I'm not able to even get that console.log in IE and Firefox. When I click on the icon the dropdown is just open and closed as if I was clicking on the button itself. I've noticed if I double click fast on the icon I can clear the selected row but does anybody know what I need to do to get that mousedown event to fire when I click on the "fa fa-close" icon?

Help is much appreciated!

Upvotes: 0

Views: 803

Answers (2)

Justin
Justin

Reputation: 2970

This seems to be due to nesting within the <button> element. Using another element as the parent "button", such as <div>, produces the results you're looking for in Firefox and Internet Explorer.

Here's a plunker demonstrating both. https://plnkr.co/edit/wJ6OB7?p=preview

Generally speaking I think the real issue is that while you can nest HTML elements within a button (and not within <input type="button">) it is probably not a good idea to have elements acting as buttons nested in that way.

Upvotes: 1

bharat batra
bharat batra

Reputation: 11

Console.log is notorious for not working on certain browsers such as IE. It is always advisable to inject $log into your controller and use $log.info/$log.error/$log.debug instead of using console.log, because $log figures out how to log to console in each different browser.

I would also inject $scope into the controller and instead of defining the function in the manner you have above, do as follows:

$scope.clearSection = function(){}

And in the HTML, would use ng-mousedown="clearSection()"

Upvotes: 0

Related Questions