dart - How to programmatically clear PaperInput and have the floating label drop down to the input line

Question

I have the following markup:

<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>

<div center horizontal layout>
  <paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>

To go along with this markup I have an addButton method which does:

addPerson(_) {
  // Add the person
  // ...

  // Clear the inputs
  ($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
  ($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}

This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?

Answer 1

It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with

import 'dart:js' as js;

var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);

alternatively you can do it like

var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();