Inputs within components within dialog not receiving focus

[akc42]

I have a dialog which contains components (as subclassed lit-element elements) which them selves contain elements. I have registered the dialogs and open them with Show Modal, but when I try and click on the input field that is displayed it doesn't accept focus. So I can't edit the input field (and on an ipad the on screen keyboard never comes up).

I am trying to test this on a mac running safari -

This all works perfectly in Chrome (on a non Apple platform).

[hadriann]

I can confirm this issue in the polyfill. Due to event retargeting in shadow DOM, the event target in the "focus" listener is not the focused element itself, but the custom element host. Thus, the event listener should use the event composed path when available instead of the event target.

[samthor]

Thanks, I'll look soon.

On Tue, 21 Apr 2020 at 22:56, Adrian Nita notifications@github.com wrote:

Indeed this seems to be a bug in the polyfill. Due to event retargeting in shadow DOM, the event target in the "focus" listener is not the focused element itself, but the custom element host. Thus, the event listener should use the event composed path when available instead of the event target.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/dialog-polyfill/issues/189#issuecomment-617161949, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA5DEHPGR7HXVFD5NN6SBDRNWJZFANCNFSM4I5UYMQA .

[hadriann]

@samthor if you want, I can open a PR for this one.

[kwaclaw]

Just ran into the same issue on Firefox. Dialog with form inside works perfectible in Chrome and Chromium based Edge, but in Firefox all text inputs are unusable, as they don't get focus. It looks like the polyfill that does not take shadow dom into account in all the places where it should.

[hadriann]

@samthor please take a look at PR #198 that should solve this.

[kwaclaw]

I tried this fix but I still can't get the text inputs in Firefox to focus.

[samthor]

Would love to see a repro case for Firefox.

[ar2r13]

Inputs are still unavailable in safari(

[hadriann]

@samthor - the issue seems to be with calling safeBlur inside dialogPolyfill.DialogManager.prototype.handleFocus_. When focusing a form element, it's immediately blurred. Any idea why it's getting called there? Anyway, it seems that in latest versions of Firefox and Safari, document.activeElement takes into account any focused element in the shadow DOM.

[hadriann]

@samthor - the issue seems to be with calling safeBlur inside dialogPolyfill.DialogManager.prototype.handleFocus_. When focusing a form element, it's immediately blurred. Any idea why it's getting called there? Anyway, it seems that in latest versions of Firefox and Safari, document.activeElement takes into account any focused element in the shadow DOM.

As far as I can see, safeBlur tries to prevent focusing elements that are outside a dialog - which is a good intention. So for each element that is about to receive focus, some checks are done to see if that element is inside a dialog. Those checks start from the given element and traverse up the DOM tree from parent to parent. It works well in regular DOM, but fails in shadow DOM because element.parentElement returns null when the parent element is a shadow root. In this case, element.parentNode.host should be used instead.

@samthor - I've addressed this in PR #213 and I'd appreciate if you could take a look at it.

[samthor]

@hadriann thanks for the fix. I'll publish today.

[hadriann]

@samthor thanks, would be great if it's published today!

[samthor]

Done, sorry for the delay.

On Thu, 7 Jan 2021 at 17:52, Adrian notifications@github.com wrote:

@samthor https://github.com/samthor thanks, would be great if it's published today!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/dialog-polyfill/issues/189#issuecomment-755924327, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA5DEB22PVYM7QFF5AREWDSYVKZZANCNFSM4I5UYMQA .