Angular-strap data-trigger='focus' not working

Question

the data-trigger focus is not working for me ...

<span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover>

Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work.

I am using angularjs. 1.2.18 and angular-strap : 2.2.4

Answer 1

You can add a tabindex attribute to make a <span> focus-able. This also applies for <div> and <table> elements.

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:

• a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
• 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
• a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the

Observe the following change to your markup...

<span data-content='foo' 
    data-html='true' 
    data-placement='top' 
    data-container='body' 
    data-trigger='focus' 
    bs-popover
    tabindex='0'>

see MDN tabindex source

Plunker - stripped demo from the docs with tabindex