Implementation of an input element adhering to the three principles laid out in http://apfelmus.nfshost.com/blog/2012/03/29-frp-three-principles-bidirectional-gui.html

InputElement.hs

{-# LANGUAGE RecordWildCards #-}

import Data.Monoid
import Control.Monad

import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny


data Input = Input
    { iElement   :: Element
    , iUserValue :: Event String
    }

newInput :: Behavior String -> IO Input
newInput bValue = do
    iElement <- UI.input
    bEditing <- stepper False $ and <$>
        unions [True <$ UI.domEvent "focus" iElement, False <$ UI.blur iElement]
    
    onChange bValue $ \s -> do
        editing <- currentValue bEditing
        when (not editing) $ void $ element iElement # set text s
    
    let iUserValue = valueChange iElement

    return $ Input {..}