The following code displays a reflex-dom dropdown element visually as a listbox and displays at the bottom always the last selected (clicked) line.
{-# LANGUAGE OverloadedStrings #-}
import Reflex.Dom
import qualified Data.Text as T
import qualified Data.Map as Map
import Data.Monoid((<>))
import Data.Maybe (fromJust)
main :: IO ()
main = mainWidget $ el "div" $ do
dd <- dropdown "2" (constDyn countries) $ def & attributes .~ constDyn ("size" =: "10")
el "p" $ return ()
let selItem = result <$> value dd
dynText selItem
return ()
countries :: Map.Map T.Text T.Text
countries = Map.fromList [("1", "France"), ("2", "Switzerland"), ("3", "Germany"), ("4", "Italy"), ("5", "USA")]
result :: T.Text -> T.Text
result key = "You selected: " <> fromJust (Map.lookup key countries)
I want to change this code, so it displays at the bottom always the last double clicked line!
I tried several things
- use the domEvent function: This does not work, because Dropdown is not an instance of the HasDomEvent class.
- filter the event in the value _dropdown_change of the Dropdown record. But I didn't find any way to filter only DoubleClick events.
- use the newtype EventSelector. Again I don't see hwo I can use it.
Question: How can I get at the double click event?
You can use
domEvent
to get at the double click.The following code uses
elAttr
to create a listbox like the one you created with dropdown. ThedomEvent
function is used to create double clickEvent
's for each of the listbox options which are then combined to get aDynamic
that represents the most recently double clicked option.I left the dropbox code in place for comparison purposes.