Search code examples
inputpolymerpaper-elementssuffix

Polymer paper-input suffix not working as expected

I have a paper-input in which I nested a SVG through an <object> element using the suffix attribute.

Now I want to call a function through tap on the <object> element.

Docs

So here is my code:

HTML

<paper-input class="border" label="Deine Email-Adresse" no-label-float>
    <object suffix data="../icons/arrow.svg" type="image/svg+xml" on-tap="_subscribeNewsletter">
        <!--<img src="fallback.jpg" />-->
    </object>
</paper-input>

CSS

.newsletter-input paper-input object {
    height : 60px; 
    width : 100px; 
    position: absolute; 
    right: -10px; 
    margin-top: 3px;
    cursor: pointer;
}

on-tap isn't fired nor is the cursor displayed as a pointer.

The input itself is nested inside a .newsletter-input div and both , the div and the input have some more styles applied to them, if needed I can add these to, just let me know.

Any Ideas?

Help would be greatly appreciated.

Solution

  • Try the following code:

    <paper-input class="border" label="Deine Email-Adresse" no-label-float>
    <img suffix src="../icons/arrow.svg" onerror="this.src='fallback.png'" on-tap="_subscribeNewsletter" />
</paper-input>

    Tested and worked like a charm :-)