How to detect focus and blur

Learn
1

elm-ui has Browser.Events.onFocus and Browser.Events.onLoseFocus
Html has Html.Events.onFocus and Html.Events.onBlur

I can’t get either to work.

I’m using elm-ui…

type FocusOrBlur
= Focus
| Blur

layout   [  htmlAttribute <| Html.Events.onFocus <| FocusChange Focus                          
         ,  htmlAttribute <| Html.Events.onBlur <| FocusChange Blur
         ] <| … 

or

layout   [  Element.Events.onFocus <| FocusChange Focus
         ,  Element.Events.onLoseFocus <| FocusChange Blur

         ] <| …

The ‘or’ isn’t part of the code but the ‘new and improved’ (!!) discourse system won’t let me remove ‘pre-formatted’ from it without removing it from the actual code as well! :man_facepalming:

update : Msg → Model → ( Model, Cmd.Cmd Msg )
update msg model =
   case msg of
      FocusChange focusOrBlur → 
         Debug.log(Debug.toString focusOrBlur)  --  <-- NO OUTPUT in Dev console
         ( { model | focusOrBlur = focusOrBlur }
         , Cmd.none 
         )

Clicking between the app and another window has no effect.

ps Whose idea was it to screw up discourse?! Two panels for writing a topic — input and output — was so much better. I have complained on the discourse community survey: 📋 Take the Discourse community survey! - Announcements - Discourse Meta

2

Depending on which element you are registering the events on, you need to use focusin / focusout events instead of focus and blur. Thats because the focus and blur events dont bubble.

You can use Html.Events.on to build to build attributes for these events:

Html.Events.on
    "focusin"
    (Json.Decode.succeed (FocusChange Focus))
3

Thank you, Viir

I added your code, and the equivalent for blur, to layout and got some strange results:
If I click on a non-button/non-active part of the app, and another window, I still get nothing.
If I click on a button which takes me to a new view, I get Focus immediately followed by Blur.

Perhaps I’m asking the wrong question? :slight_smile:

I’ll post a more focused one (pun intended)…

4

That is as expected so far, clicking somewhere does not necessarily cause a change in focus.

Sounds like you might be interested less in input focus and more in some other kind of information or event?

5

Yes, seems like you’re right Viir.

I assumed that the overall div withing a window had focus when it was clicked, or when the window was brought up, and lost focus when somewhere outside of it was clicked or when the window was dropped.

I’m learning… the hard way :laughing:

Thank you for helping me find my way.

6

Perhaps describe what functionality you’re trying to achieve?
It sounds like maybe you’re trying to figure out when the app has focus, so that for example you can avoid doing things like downloading new data when the user is not actually using the app?
If so, it is perhaps Browser.Events.onVisibilityChange that you are looking for?

Update Ah never mind, I hadn’t read the next topic, so I see your general query is now solved.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.