1 Reply Latest reply on Oct 3, 2017 11:24 AM by Max Barkley

    custom tags are losing their children

    Dmitrii Tikhomirov Newbie

      Hi all, I'm faced with a very strange behavior, so let me share it with you.

      I have tried an amazing element2 demo with polymer widget errai-tutorial (https://github.com/errai/errai-tutorial.git), but I added iron-icon to the paper-input as it's described in polymer examples https://www.webcomponents.org/element/PolymerElements/paper-input. But, according to a debug message, it disappears.

       

      <div data-field="contact">
        <paper-input label="username">
        <iron-icon slot="prefix" src="img/errai.png"></iron-icon>
        <div slot="suffix">@email.com</div>
        </paper-input>
      </div>

       

       

      <paper-input label="username" tabindex="0" aria-disabled="false">
      <paper-input-container class="style-scope paper-input">
      <template is="dom-if" class="style-scope paper-input-container"></template>
      <div class="input-content style-scope paper-input-container">
      <div class="label-and-input-container style-scope paper-input-container" id="labelAndInputContainer" style="position: relative;">
      <label aria-hidden="true" for="input" class="style-scope paper-input">username</label><input is="iron-input" id="input" class="style-scope paper-input" autocomplete="off" placeholder="" autocapitalize="none" autocorrect="off" aria-describedby="" aria-labelledby="" tabindex="0"><template is="dom-if" class="style-scope paper-input"></template><template is="dom-if" class="style-scope paper-input"></template>
      </div>
      </div>
      
      
      <div class="underline style-scope paper-input-container">
      <div class="unfocused-line style-scope paper-input-container"></div>
      <div class="focused-line style-scope paper-input-container"></div>
      </div>
      
      
      <div class="add-on-content style-scope paper-input-container"></div>
      </paper-input-container>
      </paper-input>
      </div>
      

       

       

      Maybe I'm doing something wrong ? Thanks for help !

       

      PS: reproducer errai-tutorial.tar.xz

        • 1. Re: custom tags are losing their children
          Max Barkley Expert

          Hi Dmitri,

           

          When Errai creates a component it replaces the element from your template with the corresponding @DataField in your templated bean, so you are having the paper-input with the iron-input inside it replaced with a paper-input with no content. For some kinds of @DataFields (like Widgets implementing HasHtml) Errai would preserve the child elements, but we haven't yet implemented anything like this for elements.

           

          A temporary solution is to programmatically add an iron-input as a child of your PaperInput, or to not use a @DataField and programmatically lookup your PaperInput from your template with a query selector. A better long-term solution is to open a JIRA for a feature for new API to support this. In particular, we had a feature added in Errai 4 to support configuring the merge strategy for attributes of elements in the @DataField annotation. It might make sense for @DataField to have an attribute as well to specify whether the child-content of an element should be preserved.