jeudi 29 octobre 2015

Does focusOut work differently in FireFox than in other browsers?

In my application, I have a div with tabindex='0', with this kind of structure:

<div class='parent' tabindex='0' bubbles=false>
    <div class='child1'>
    </div>
    {{#if property}}
        <div class='child2'>
            <div id='listitem1'>
            </div>
            <div id='listitem2'>
            </div>
        </div>
    {{/if}}
<div>

This is an ember application, so the {{#if}} comes from handlebars. I used the focusOut property for this entire component to hide child2 on focusOut. Even if you're not familiar with Ember.js, the idea is that the focusOut event handler is bound to the main element of the component. In this case: parent.

In Chrome, IE and Safari, when I click any of the list item divs inside child2, the parent retains focus. In FireFox, specifically the latest one (41.0.2), clicking any element inside parent will cause parent to lose focus.

This leads me to believe that FireFox handles focusout differently. If so, how can I make sure that on clicking any element inside a focused parent, the parent will stay focused?

I have to mention a few things:

  • I cannot accept a solution involving a listener on the click event itself. (As in listen for click on the entire document and see if the clicked target is the parent div).
  • I cannot use 'blur'. It causes this same issue to appear in all browsers.



Aucun commentaire:

Enregistrer un commentaire