No closing of overlay on blur.

[viktor-evdokimov]

See screenshot

[viktor-evdokimov]

I don't know what is wrong with github on my machine today, but can't attach screenshot. Basically I do the following:

• click on first input box ,
• type A ,
• click on second input box
• type A

Have both autocomplete overlays open.

[gregziegan]

Good catch! Yep, those are both just examples of using the API. Will fix the business logic on the demo page. I have some more work to do on that page anyways 😃 . Am on holiday now, so any PRs are certainly welcome until I get back!

[ericgj]

I think this can be finessed using the event.relatedTarget -- i.e. write a custom onBlur decoder that checks if the relatedTarget id == the menu id. If it is, then don't hide the menu, else hide the menu. I'm going to try this soon.

(My guess is relatedTarget was added for exactly this kind of situation. Not sure how far back browsers support it but I think it's widely supported in modern browsers.)

[ericgj]

This seems to work for me (based on the Accessible example). Note adding an id to the menu div so we can check if the thing the user clicked on is the menu or not:

-- in view
let
    -- ...
    relatedTargetId = 
        Json.at ["relatedTarget", "id"] Json.string

    blurDecoder =
        Json.maybe relatedTargetId
            |> Json.map (Maybe.map \id -> if id == menuId then NoOp else OnBlur)
            |> Json.map (Maybe.withDefault NoOp)

    -- ...
in
    div [] 
        [ input
            [ on "blur" blurDecoder 
            -- ...
            ] [ ]
        , menu
        ]

-- in update
    case msg of
        -- ...
        OnBlur:
            ( resetMenu model ! [] )