Firefox: default outline on focus not visible

I have a situation with Firefox browser on Win 7 and Win 10. I have a left menu on the page with a menu icon and 5 menu items. The Menu icon can expand/collapse the left menu. So when the page loads first time or when we switch to any other page, the focus will go to the menu icon and user can use keyboard tabbing to navigate through the menu items.

Now the issue is this. On firefox, in a particular scenario, I do a form post and leave the page and land on another page. From there I click the exit button and land back on my original page. And when I do that, I want the menu icon to be focused with the white outline(user agent style) visible. But what I see is that the menu icon is not outlined.

For debugging purposes, I am printing document.activeElement and it says that the menu icon indeed is the active element. Also when I press the tab key, the focus goes to the next element after the menu icon, and shift+tab now takes focus back to the menu icon with a visible outline now.

So the situation is that the icon is focused but the outline is not visible. The icon is a div with tanindex="0" and focus is set using JS.

Any help would be appreciated. This works fine on all other browsers including FF on Mac.

NOTE: AM using ember framework, and the left menu here is a component and am setting the focus on the menu icon on the component's didInsertElement lifecycle hook.