1138028 - click on absolute element inside focusable element does not focus focusable element unless it has a CSS position

Status: UNCONFIRMED

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Jerome Louis]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36

Steps to reproduce:

Create a DIV element with a tabindex.
Create another DIV element inside that first DIV, with absolute positionning.

http://codepen.io/jlowcs/pen/bNKaaX



Actual results:

When inside DIV is clicked, the focus is not set to the outside DIV.
Howerver, if a position is added to the outside DIV, the focus is set when the inside DIV is clicked.


Expected results:

The outside DIV should get the focus whether it has a CSS position or not.

Comment 1

[Nickolay_Ponomarev]

Well it kind of makes sense given that only a positioned element (position != static) is a 'containing block' for the absolutely positioned element: http://www.w3.org/TR/CSS21/visuren.html#comp-abspos
(This is more visual explanation: https://css-tricks.com/absolute-positioning-inside-relative-positioning/)

I don't know which spec, if any, defines the focusing behavior in this much detail.

ref the SO question from which this was filed: http://stackoverflow.com/q/28772810/1026

Comment 2

[Nickolay_Ponomarev]

Attachment: testcase from the reporter (slightly changed)

I can reproduce on OS X 10.9 on a current Nightly. Chrome works as reporter expects.

Comment 3

[Nickolay_Ponomarev]

Jerome, sorry it took so long for this to be triaged and thanks for filing this report!

Comment 4

[noel.abrahams]

Here is a real-world use-case:

https://jsfiddle.net/kc865xn1/

The placeholder should disappear when the box is clicked but it doesn't because of this bug. Setting the position of the ::before element, or that of .text to relative fixes the problem.

I hope this bug gets fixed.

Thanks.