Matt-Esch/virtual-dom で Element の focus() を呼び出す

問題

Matt-Esch/virtual-dom を使用している状況で、Element の focus() を呼び出したい。

解決策

Matt-Esch/virtual-dom の Hook を使う。公式の FAQ に書いてある。

以下は例。

class FocusHook {
  private focus: boolean;

  constructor(focus: boolean) {
    this.focus = focus;
  }

  hook(e: any) {
    if (focus) e.focus();
  }
}

const view = (isFocus: boolean) => {
  const items: { focus: boolean; }[] = [
    { label: 'item1', focus: false },
    { label: 'item2', focus: true }
  ];
  return items.map(item => {
    return h('input', {
      'ev-focus': new FocusHook(item.focus)
    })
  });
};

// ...

おそらく e.focus() は nextTick で呼び出すほうが望ましいだろう。ちなみに Matt-Esch/virtual-dom は focus-hook.js を含んでいる (利用方法はなさそう) ので、そういう形で書くほうが良いかも。