CODEWITHSUNDEEP
javascripthtmliosbootstrap-4bootstrap-popover
André Reichelt
André Reichelt

Reputation: 1631

Focus event for button doesn't fire on iPad

I want to add a bootstrap popover to my site. It should show up, when the user pushes a button by using the focus event. This works on the Desktop, but not on the iPad. It seems like Safari on iOS doesn't raise the focus event for buttons altogether.

As a workaround, I replaced the button with an a tag. This does work, but gives some other issues like a lack of the disabled state without adding a specific class. 

<a class="btn btn-outline-secondary" id="ap-btn-selectColor" data-toggle="popover" role="button">
    <i class="fa" style="background-color: rgb(140, 181, 255); width: 16px" id="ap-fgColorSelection">&nbsp;</i>
</a>
<button type="button" class="btn btn-outline-secondary" id="ap-btn-selectBorderColor" data-toggle="popover">
    <i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection">&nbsp;</i>
</button>

$('[data-toggle="popover"]').popover({
    content: function () {
        return $someElement;
    },
    placement: 'auto',
    html: true,
    trigger: 'focus'
});

In my example, the popover works for the first element, but not for the second.

Is there a way to enable the focus event for buttons on iOS?

Upvotes: 1

Views: 1146

Answers (1)

Andr&#233; Reichelt
Andr&#233; Reichelt

Reputation: 1631

The solution was quite simple. You simply can't use a button on an iOS device, because it doesn't have a focus event. Instead, you should use an a tag with role="button" and a valid tabindex setting.

<a role="button" id="ap-btn-selectBorderColor" class="btn btn-outline-secondary" data-toggle="popover" tabindex="1">
    <i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection">&nbsp;</i>
</a>

Upvotes: 2

Related Questions