Event once rendering is complete

[ericraider33]

Is there anyway to listen for an event once rendering is done?

Say, for example, that I have a state property that holds a reference to a panel. When the page first loads, it is set to panel A. After the user submits some information, I swap out panel A for B. I accomplish this by setting my state property to panel B. When panel B is fully attached to the page, I'd then like to set the focus to one of the input boxes.

I've tried using autofocus, which works fine for panel A. However, when swapping to panel B, the autofocus attribute doesn't seem to do anything. If there was a post rendering event, I could easily solve this problem.

I'm sure that I could hack together a solution using the loaded event for a 1x1 image or some crazy solution like that, but I'd prefer to work within the framework instead of relying on side effects of images.

[Tao-VanJS]

A quick and dirty solution is to use setTimeout with a small delay. You can see this technique in a few places of the official codebase. For example: 1, 2. #123 is the thread that discusses the use of setTimeout.

If you want to get rid of setTimeout (thus the small delay introduced by it). You can program your app in this way (this solution requires VanJS 1.5.0 or later):

const {button, div} = van.tags

const Label = ({text, onRender}) => {
  if (onRender) {
    const trigger = van.state(false)
    van.derive(() => trigger.val && onRender())
    trigger.val = true
  }
  return div({class: "label"}, text)
}

const counter = van.state(0)

van.add(document.body,
  div(button({onclick: () => ++counter.val}, "Increment")),
  () => Label({
    text: counter.val,
    onRender: () => van.add(document.body,
      div("Current label: ", document.querySelector(".label").innerText),
    ),
  }),
)

In this example, the onRender handler is called right after each rendering cycle.

Hope it helps :-)

[ericraider33]

Interesting. I assume the derived state is calculated after the original state is finished rendering. If so, that is a creative solution.

Thanks for the tip.

Eric.

[Tao-VanJS]

You can also consider defining a custom element with connectedCallback.

[ericraider33]

That is interesting, but looks a little too involved for my needs.

I was able to get your example working in a simple case, but in my more involved code, it didn't make much sense.

For completeness, I'll post the pixel solution that I was able to get working. It relies on loading a 1x1 transparent image and listens to the load event.

static load(onload)
{
      if (typeof onload !== "function")
            throw "'onload' parameter must be of type 'function'";
        
       const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACx' +
            'jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY2BgYGAAAAAFAAGKM+MAAAAAAElFTkSuQmCC';
      return van.tags.img({ src: url, onload: onload });
}
    
static setFocus(event)
{
      let img = event.target;
      let parent = img.parentElement;
      let toFocus = parent.querySelector('[autofocus]');    // finds sibling element with the 'autofocus' attribute set
      if (toFocus != null)
          toFocus.focus();
}

And can be used like:

div({class: "mt-3"},
    label(h6('User Name')),
    input({ type: 'text', required: 'required', autofocus: true,
        value: initialValues.userName.rawVal, oninput: e => this.form.userName = e.target.value }),
    load(setFocus)
),

[Tao-VanJS]

That's a neat solution. Thanks for sharing!