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?

Perhaps you want to use an "initializer"? The function signature changed in the new version, but if you look up that name in the docs/examples, you should find it. — Phil Freeman
– Phil Freeman, Commented Aug 27, 2015 at 16:03

dermoritz · Accepted Answer · 2015-08-31 07:23:49Z

5

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).

answered Aug 31, 2015 at 7:23

dermoritz

1878 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniil Iaitskov Over a year ago

this solution requires assigning ids to nodes which complicates dynamic interface with multiple replicas. Isolation is not preserved.

Alebon · Accepted Answer · 2023-11-11 14:34:25Z

1

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

answered Nov 11, 2023 at 14:34

Alebon

1,1972 gold badges11 silver badges24 bronze badges

Collectives™ on Stack Overflow

Automatically focus input element after creation in purescript-halogen

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related