Component focusIn not triggered on click in FF and Safari

Ember CLI
1

Hello, I mad a little twiddle to show issue I am having

When you click on the button in Chrome you will see that focusIn event is fired. Try that in FF and its not doing it. What works is that you can tab into the component which fires the focus in. How can I build something which works for both the same way.

2

apparently the button in FF can have a focus but this works

<button onclick="this.focus()">click me</button>

3

I’m kind of confused at what you’re going for. The above component creates:

<div>
   <button>click me</button>
   <div>some list here</div>
</div>

Your focusIn and focusOut are mapped to the outer <div> containing the two elements. What are your goals with the component? Focus on the button or focus on the containing div?

BTW, your twiddle does not log anything to the console for me in Chrome.

4

Ok, I will explain it how I understand it now. A div component can’t trigger focus-in and focus-out but if you put a button inside of the component the focus event will bubble up to the component and those events are fired. The interesting thing here is that a button in FF and safari does not fire a focus event when you click it. That means that focus-in and focus-out wont fire too. What you can do though is triggering a focus event manually when you click the button → onclick-“this.focus()” which then bubbles up and fires the components events accordingly.