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)