Automatically focus input element after creation in purescript-halogen

∥☆過路亽.° 提交于 2019-12-24 05:13:05

问题


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?


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



来源:https://stackoverflow.com/questions/32248943/automatically-focus-input-element-after-creation-in-purescript-halogen

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!