[SOLVED] How to append a link to gwtbootstrap 3 InputField

How to append a link to gwtbootstrap 3 InputField

I want to do this in html:

<div class="input-group" id="name">
    <input type="text" class="form-control" name="name" placeholder="Name">
    <span class="input-group-addon"><a href="#" class="none" id="name">None</a></span>
</div>

I try this in GWT Bootstrap:

<b:InputGroup>
    <b:TextBox b:id="name" placeholder="Name"/>
    <b:InputGroupAddon>
        <b:Anchor ui:field="noName" text="None"/>
    </b:InputGroupAddon>
</b:InputGroup>

But thus I get the error:

Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)

Why? b:Anchor implements HasText interface.

My aim is to add a link on which, when a user clicks input will fill value NONE

Solution

The HasText bit is about InputGroupAddon, not Anchor. "Text-only context" (implied by implementing HasText) means you can only put, well, text into that widget. Either through the text property (<b:InputGroupAddon text='Name' />) or inside the tags (<b:InputGroupAddon>Name</b:InputGroupAddon>) - those declarations are equivalent. You can't put unescaped HTML or widgets in such a context.

For your use case, I'd recommend using buttons (as the Bootstrap docs suggest):

<b:InputGroup>
  <b:TextBox b:id="name" placeholder="Name" />
  <b:InputGroupButton>
    <b:Button ui:field="noName" text="None" />
  </b:InputGroupButton>
</b:InputGroup>

See the demo to see it in action. You can easily style it to your needs (maybe no text and just an icon = "ERASER").