JQuery Mobile focusout event for relatedTarget returns incorrect result in Safari

Question

According to this: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/focusout

relatedTarget (Read only) - EventTarget (DOM element) - event target receiving focus.

I assume that eventObject.relatedTarget should point to the element that will receive the focus.

Example

Here is a code that i am using: http://jsfiddle.net/DMINATOR/L38pG/

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
     <p>Click here: <textarea id="js-result" style="width:80%;vertical-align:top"></textarea></p>
    <div>Result <p id="result-of-click"></p></div>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
     <div data-role="controlgroup" data-type="horizontal">
     <input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" />
     <input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" />
     </div>
</div><!-- /footer -->

JS:

$("#js-result").focusout(function (eventObject) {

var relatedTarget = eventObject.relatedTarget;

var message = "[DEBUG] - [FOCUSOUT] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;

$("#result-of-click").text(message);
console.log(message);

});

Running the same code with different browsers: Opera and Safari produce different results.

Steps to reproduce

1. Click on TextArea
2. Click on button "Right" on the header

Expected result (see Opera)

Opera:

Safari: (For some reason Safari points to the main page as the one that will be focused)

I am trying to hide/show the header depending if the text area i am using receives focus or not, here is an example: http://jsfiddle.net/DMINATOR/LLcpR/

Question

Is this a bug in jquery (mobile) or Safari itself ? Is there any workaround for this, so i could find the button that will be focused next ?

Answer 1

After some research, it seems that this is an issue with Mac OS (both desktop and mobile).

I made a small example to demonstrate, that focus events are not received for buttons ! (it works in Opera, Chrome, Firefox (on Windows, but not Safari on Mac OS X): http://jsfiddle.net/DMINATOR/7EtJD/

<div id="foo" data-role="page">

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
     <p>Click here:</p>
    <input type="button" data-custom-selector-attribute="true" name="btnTest" class="my-custom-selector-class" id="btnTest" value="Test" />
    <p id="focus-attribute-result"></p>
    <p id="focus-class-result"></p>
    <p id="click-attribute-result"></p>
    <p id="click-class-result"></p>
</div><!-- /content -->

$(document).on('focus', "input[data-custom-selector-attribute='true']", function (e) {
$("#focus-attribute-result").text("Focus - Got attribute selector!");
});

$(document).on('focus', ".my-custom-selector-class", function (e) {
$("#focus-class-result").text("Focus - Got class selector!");
});

$(document).on('click', "input[data-custom-selector-attribute='true']", function (e) {
$("#click-attribute-result").text("Click - Got attribute selector!");
});

$(document).on('click', ".my-custom-selector-class", function (e) {
$("#click-class-result").text("Click - Got class selector!");
});

There was a bug report created for jQuery, but it was closed, since it is not an issue with jQuery itself: http://bugs.jquery.com/ticket/7768

Right now it is waiting on Web Kit developers (Apple) https://bugs.webkit.org/show_bug.cgi?id=22261

It's been 4.5 years since this bug was first reported. Presumably the fix is simple (I looked at the patch) but it seems Apple folks (Darian, Alexey, etc.) can't agree to it and the debate is still going on.This makes webkit different from everything else on Windows.

I don't care about Safari on Mac or Windows but sadly this affects Chrome on Windows, which I do care about. See comment #20 from Daniel. I strongly urge the Apple folks to be a little open minded about this. It DOES affect end users.

This is actually fixed in Chrome now (https://code.google.com/p/chromium/issues/detail?id=89708), but not yet in Safari.