In dart how to extend a custom PolymerElement with PaperInputBehavior?

Issue

Basically I try to do a port of GoldCcCvcInput to a dart implementation, instead of wrapping of a js implementation.

Looking at this:
https://github.com/PolymerElements/gold-cc-cvc-input/blob/master/gold-cc-cvc-input.html
Together with https://github.com/dart-lang/polymer-dart/wiki/behaviors

Something like:

 @PolymerRegister('nbdate-input')
 class NbdateInput extends PolymerElement with PaperInputBehavior,
 IronControlState, IronA11yKeysBehavior ...

Minimal test project
https://github.com/jonboj/inputbehavior-dart.git

The project initialize without dumping any error messages and displays the iron-input elements ok. But when one of the iron-input elements are put in focus, the exception below is dumped in the console:

Uncaught TypeError: Cannot read property 'focus' of undefined
  Polymer.PaperInputBehaviorImpl._onFocus   
  handler   
  Polymer.Base._addFeature.fire 
  Polymer.IronControlState._focusBlurHandler

This has an override of method onFocusedChanged https://github.com/PolymerElements/gold-cc-cvc-input/blob/master/gold-cc-cvc-input.html#L219

In dart a corresponding Observer is triggered, with a printout occurring after the exception dump.

https://github.com/jonboj/inputbehavior-dart/blob/master/lib/nbdatebehavior_input.dart#L56

Solution

For my case the needed functionality was provided by

https://elements.polymer-project.org/elements/paper-input?active=paper-input-container

With Dart following the structure of last example (Social Security Number) in
https://elements.polymer-project.org/elements/paper-input?view=demo:demo/index.html&active=paper-input

Answered By – Jonas Bojesen

Answer Checked By – Katrina (FlutterFixes Volunteer)