Automatically focus input element after creation in purescript-halogen

Question

I'm using purescript-halogen to build a spreadsheet-like table (similar to Handsontable). If you double-click a cell, an html input element is rendered as a child of the respective table cell (and no such element is rendered for all the other cells).

This works really well with halogen, except that I don't know how to automatically set the focus to the newly created input element.

I tried the autofocus attribute, but this only works for the first cell that is double-clicked. The JavaScript way to do it is by calling the focus() method on the new element, but I don't know how to call it after the DOM has been updated in halogen. Any ideas?

Answer 1

Ok, here is how I did it using Phil's Initializer hint:

Write a JavaScript function that actually focuses the element.

exports.setFocusImpl = function(elemId) {
  return function() {
    document.getElementById(elemId).focus();
  };
};

FFI it.

foreign import data FOCUS :: !

foreign import setFocusImpl :: forall e. Fn1 String (Eff (focus :: FOCUS | e) Unit)

setFocus :: forall e. String -> Eff (focus :: FOCUS | e) Unit
setFocus = runFn1 setFocusImpl

And then use the setFocus function in the initializer.

H.input
[ A.id_ "inputField"
, A.Initializer do
    liftEff $ setFocus "inputField"
    pure DoNothing
] [ ]

Note that I'm using an old version of halogen where the signature is still the old one (definition of Initializer in 30e8b2c7).

Answer 2

The mothod which is described here is a bit outdated. It is not necessary to write the foreign focus function. It exists already in the Web.HTML.HTMLElement library. I describe the updated method in my blog post here: Focus Input Element