focus input text inside template-if in Polymer Dart

Question

Let's assume I've got Polymer custom control like:

<template if="{{editMode}}">
 <input id="myInput" type="text">
</template>

<div on-doubleclick="{{setEditModeToTrue}}">
  some stuff here
</div>

Now I want #myInput to be text focused everytime editMode is true. The problem is that in the setEditModeToTrue handler #myInput is not yet in DOM tree so I can't focus it by:

root.QuerySelector('#myInput').focus();

(And yes I tried setting autofocus attribute on input but it works only for the first double click)

Is there any event or something else letting me know that template-if content is in DOM tree ?

ok my current work around is to do: new Future.delayed(const Duration(milliseconds: 100), () { root.querySelector('#myInput').focus(); }); in setEditModeToTrue handler — tomaszkubacki

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-12-30T16:40:53

You can wrap or extend the input element and put your code in the attached or ready lifecycle method or use MutationObserver.

focus input text inside template-if in Polymer Dart

1 Answers