When you render an input
HTML element you might want to focus it (e.g. when it was a single field the user asked to reveal). If you’re using using Purescript Halogen you have to go a bit beyond the basic component lifecycle and bind an action to be evaluated at the moment the element is created. An example using Halogen 5 follows.
import H.Query.Input as H.Query.Input
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
import Halogen.VDom.DOM.Prop as H.DOM
import Web.DOM as Web.DOM
import Web.HTML.HTMLElement as HTMLElement
data Action = InputCreated Web.DOM.Element
render :: forall cs m
. MonadAff m
=> State
-> H.ComponentHTML Action cs m
=
render state HP.IProp (H.DOM.Ref inputRefChange) ]
HH.input [ where
H.DOM.Created element)
inputRefChange (= Just (H.Query.Input.Action (InputCreated element))
H.DOM.Removed _ )
inputRefChange (= Nothing
handleAction :: forall cs o m
. MonadAff m
=> Action
-> H.HalogenM State Action cs o m Unit
InputRendered element) =
handleAction (maybe
pure unit)
(<<< HTMLElement.focus)
(H.liftEffect (HTMLElement.fromElement element)