8000 Autofocus attribute doesn't work reliably · Issue #186 · elm/html · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Autofocus attribute doesn't work reliably #186

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.

Sign up for GitHub

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

Jump to bottom
Open
davetapley opened this issue Feb 25, 2019 · 9 comments
Open

Autofocus attribute doesn't work reliably #186

davetapley opened this issue Feb 25, 2019 · 9 comments

Comments

@davetapley
Copy link
davetapley commented Feb 25, 2019 •
edited
Loading

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.
@davetapley
Copy link
Author
davetapley commented Feb 25, 2019 •
edited
Loading

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.

@davetapley
Copy link
Author

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()

@davetapley
Copy link
Author
davetapley commented Feb 26, 2019 •
edited
Loading

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.

@davetapley davetapley mentioned this issue Feb 26, 2019
Open
@ChristophP
Copy link
ChristophP commented Feb 27, 2019 •
edited
Loading

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.

@davetapley
Copy link
Author

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).
8000

@davetapley
Copy link
Author
davetapley commented Feb 27, 2019 •
edited
Loading

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? 😞

@davetapley
Copy link
Author
davetapley commented Feb 27, 2019 •
edited
Loading

I also tried ⬆️ here using attribute instead:

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

Same behavior 😞

@ChristophP
Copy link
ChristophP commented Mar 5, 2019 •
edited
Loading

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.
< 80C7 input type="hidden" data-csrf="true" name="authenticity_token" value="wU2Vt0BlBenAumkgKgKDPPE6La+KQogUMVHAk+hl0zqPtdT7n5Zio3jPaFODEQZVEgqViWDe29JjBrKxRLiC4g==" />

@SimonAlling
Copy link
SimonAlling commented Apr 2, 2023 •
edited
Loading

I also tried arrow_up here using attribute instead:

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

Same behavior disappointed

Can confirm that this doesn't work, even in a plain web app (i.e. no Ellie, <iframe> etc). 😿

If I run document.querySelector("dialog").show() in the console, then the input is focused, but if I do document.querySelector("dialog").setAttribute("open", ""), then the input isn't focused (but the dialog is shown).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@davetapley @ChristophP @SimonAlling
0