(md-icon)(md-bottomsheet) Firefox hangs on blur when using SVG icons

[marshfire]

When using a md-svg-src in md-icon and this is clicked to trigger a bottom-sheet, firefox stops displaying the page with the error below while chrome works:

"Error: this[0].blur is not a function
angular.element.prototype.blur<@http://localhost:9001/bower_components/angular-material/angular-material.js:804:5
onShow@http://localhost:9001/bower_components/angular-material/angular-material.js:3644:30
InterimElement/self.show/showDone<@http://localhost:9001/bower_components/angular-material/angular-material.js:1847:25
processQueue@http://localhost:9001/bower_components/angular/angular.js:13248:27
scheduleProcessQueue/<@http://localhost:9001/bower_components/angular/angular.js:13264:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:9001/bower_components/angular/angular.js:14466:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9001/bower_components/angular/angular.js:14282:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:9001/bower_components/angular/angular.js:14571:13
done@http://localhost:9001/bower_components/angular/angular.js:9698:36
completeRequest@http://localhost:9001/bower_components/angular/angular.js:9888:7
requestLoaded@http://localhost:9001/bower_components/angular/angular.js:9829:1
" angular.js:11655
consoleLog/<() angular.js:11655
$ExceptionHandlerProvider/this.$get</<() angular.js:8596
processQueue() angular.js:13256
scheduleProcessQueue/<() angular.js:13264
$RootScopeProvider/this.$get</Scope.prototype.$eval() angular.js:14466
$RootScopeProvider/this.$get</Scope.prototype.$digest() angular.js:14282
$RootScopeProvider/this.$get</Scope.prototype.$apply() angular.js:14571
done() angular.js:9698
completeRequest() angular.js:9888
requestLoaded() angular.js:9829

When debugging into it, it looks like firefox gets a different object to blur. While Chrome gets the md-icon, firefox gets the svg object and cannot blur it.

The is the Firefox debug:

and this is chrome:

I cannot provide a codepen/fiddle because I cannot use svg urls there.

The code:

div.products(layout="column", flex-fill, layout-align="center center", style="padding: 10px;")
  .md-whiteframe-z2(ng-controller="productsCtrl", layout="column", flex, layout-fill, style="max-width: 400px;")
    md-list(layout="column")
      md-item(ng-repeat="product in products | orderBy: 'name'")
        md-item-content(layout-align="start start", flex="row", md-swipe-left="showBottomSheet($event, product)")
          .tile-content(flex, layout="row")
            div(flex)
              h3
                | {{ product.name }} ({{ product.alias }})
              h4
                | {{ product.description }}
            div(style="width: 40px;")
              .md-button(ng-click="showBottomSheet($event, product)", style="min-width: 40px;")
                md-icon.s32(md-svg-src="assets/images/modify.svg", aria-label="modify product icon")
        md-divider(ng-if="!$last")

'use strict';

angular.module('timetableApp')
  .controller('productsBottomsheetCtrl', function($scope, $mdBottomSheet, product) {
    $scope.product = product;
    $scope.identifier = product.name;
    $scope.options = [{
      label: 'edit',
      action: 'edit',
      icon: 'assets/images/edit.svg',
    }, {
      label: 'delete',
      action: 'delete',
      icon: 'assets/images/delete.svg',
      class: 'warning'
    }];

    $scope.action = function(event, action) {
      $mdBottomSheet.hide({
        event: event,
        action: action,
        product: $scope.product
      });
    };
  });

'use strict';

angular.module('timetableApp')
  .controller('productsCtrl', function(masterdata, $scope, $mdBottomSheet, $mdDialog) {
    $scope.products = masterdata.getProducts();

    $scope.showBottomSheet = function($event, product) {
      $mdBottomSheet.show({
        templateUrl: '/components/standardelements/bottomsheet.html',
        controller: 'productsBottomsheetCtrl',
        targetEvent: $event,
        locals: {
          product: product
        }
      }).then(function(data) {
        switch (data.action) {
          case 'edit':
            $scope.showProductEditor(data.event, product, 'edit');
            break;
          case 'delete':
            $scope.confirmDelete(data.event, product);
            break;
          default:
            console.log("Unsupported action: " + data.action);
            break;
        }
      });
    };
  });

[ThomasBurleson]

@marshfire - seems like the problem source may originate here:

div(style="width: 40px;")
              .md-button(ng-click="showBottomSheet($event, product)", style="min-width: 40px;")
                md-icon.s32(md-svg-src="assets/images/modify.svg", aria-label="modify product icon")

and here in bottomsheet.js:

element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');

// Add a backdrop that will close on click
backdrop = $compile('<md-backdrop class="md-opaque md-bottom-sheet-backdrop">')(scope);
backdrop.on('click', function() {
  $timeout($mdBottomSheet.cancel);
});

[marcysutton]

Also keep in mind that Bottom Sheets are for mobile only.

[marshfire]

would change it if there were a popup menu :/

[marshfire]

Might be helpful: When I use the element inspectors in chrome and firefox alike on the icon, and there is a svg element below the md-icon, then I get the md-icon element delivered on chrome and the svg element below it in firefox.

[marshfire]

@ThomasBurleson possible fix: add "pointer-events: none;" to the style of the SVG, then it works in Firefox as well.

md-icon {
  svg {
    pointer-events: none;
  }
}

[ThomasBurleson]

@marshfire - like it.