In d3 on blur event is not working in firefox only

Question

I'm trying to use the blur event in d3, which is working fine in chrome and safari browser, but unfortunately, it is not working in firefox. The purpose of using blur is to reset the other items after clicking outside the canvas.
Any workaround solution to the problem?

var width = 500;
var height = 400;
var svg = d3.select("#viz")
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 " + width + " " + height)
  .append('g');
var outer = svg.append('g')
  .attr('transform', "translate(" + width / 2 + "," + height / 2 + ")")
  .attr('class', 'boundry');

var boundry = outer.append("svg:circle")
  .attr("r", 100)
  .attr("class", "primary-parent")
  .attr('fill', 'red')
  .attr('stroke', "yellow")
  .attr("stroke-width", 5);

d3.selectAll('.primary-parent').on('click', function() {
  alert("click event fired");
}).on("blur", function() {
  alert("blur event fired");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="viz"></div>

This seems to have been discussed [here](http://stackoverflow.com/questions/25201695/svg-a-element-not-receiving-focus-correctly-in-firefox-and-ie11). — Kazimieras, Jun 06 '16 at 14:42

score 1 · Answer 1 · answered Jun 06 '16 at 15:00

I don't like this solution, but similar behavior to what you are looking for could be implemented by tracking the focused object yourself and removing focus by attaching a temporary click listener to the window object. So the event code becomes something like:

var focused;
var setWindowClickListener = function(e) {
    if (e.target !== focusedElement) {
    focusedElement = null;
    window.removeEventListener('click', setWindowClickListener);
    alert('blur');
  }
};

d3.selectAll('.primary-parent')
.on('click', function() {
    alert('click');
    focusedElement = d3.event.target;
    window.addEventListener('click', setWindowClickListener);
});

See the fiddle.

Naturally, this is not ideal, since we are attaching an arbitrary event listener, and this does not work with keyboard blur - the fundamental feature of the blur event. However, it may work for you with some adjustments.

In d3 on blur event is not working in firefox only

1 Answers1