Open viktor-evdokimov opened 8 years ago
I don't know what is wrong with github on my machine today, but can't attach screenshot. Basically I do the following:
Have both autocomplete overlays open.
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!
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.)
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 ! [] )
See screenshot