Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autofocus attribute doesn't work reliably #186

Open
dukedave opened this Issue Feb 25, 2019 · 8 comments

Comments

Projects
None yet
2 participants
@dukedave
Copy link

dukedave commented Feb 25, 2019

SSCCE on Ellie:

What I expect: The input is focussed any time it it appears on screen.
What happens: The input is focussed on page load, but not after 'Hide input' then 'Show input' are pressed in succession.

Seen on MacOS Chrome Version 71.0.3578.98 (Official Build) (64-bit).

Elm 0.19.

@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 25, 2019

I presume it's due to this:

autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.

If that's the case them I think Elm should either manage the autofocus in

situations where you are swapping, or opening, or unhiding DOM elements

..., or it should not provide autofocus in HTML.Attributes.

@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 25, 2019

I don't know if it's due to some shadow DOM magic, but I just tried this JS workaround and it doesn't work either, leaving me with no way to get an input to autofocus? 😱

Array.from(document.getElementsByTagName("input")).find(function(i) { return i.autofocus }).focus()
@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 26, 2019

As mentioned here there is a solution using Dom.focus as shown here.

I'm going to make a PR to update the docs to at least call that out (although I still think it'd be nice if the autofocus attribute took care of it.

@ChristophP

This comment has been minimized.

Copy link

ChristophP commented Feb 27, 2019

The HTML spec defines the behavior that autofocus will set the focus only on page load. I think it would be strange if Elm deviated from that behavior.
It wouldn't hurt to be added to the docs I guess, although everything in the Html module just works how HTML works in general.

@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 27, 2019

Thanks for the link @ChristophP.

I didn't know this:

The autofocus content attribute allows the author to indicate that a control is to be focused
[...]
as soon as the dialog within which it finds itself is shown

I don't see a dialog in Html, but using a dialog and adding/removing open certainly seems more appealing than having to use events (namely Dom.focus).

@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 27, 2019

I tried to implement ⬆️ here using:

node "dialog" [property "open" (bool model.inputVisible)] 
            [ input [autofocus True] []]

It works insomuch as the dialog (and input) appear and disappear, but the autofocus still doesn't work. Maybe some shadow DOM shenanigans? 😞

@dukedave

This comment has been minimized.

Copy link
Author

dukedave commented Feb 27, 2019

I also tried ⬆️ here using attribute instead:

node "dialog" (if model.inputVisible then [attribute "open" ""] else [])
            [ input [autofocus True] []]

Same behavior 😞

@ChristophP

This comment has been minimized.

Copy link

ChristophP commented Mar 5, 2019

I am guessing it could be related to two things.

  1. Some timing issue: Maybe when the page loads the input isn't quite painted yet, so autofocus has no effect, because any autofocus that gets drawn after page load doesn't do anything.
  2. Ellie runs your code in an iframe. Maybe your autofocus isn't the only one on the page, or there are some scripts which "steal" away the focus from your element. Even in a situation with iframes (where there's multiple windows on the page), you can still only have one focused element to my knowledge. Otherwise, how would the browser know where to put the characters when you type.

I would try to debug it by running it on a page that you control, not inside ellie.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.