Polymer paper-input suffix not working as expected

Question

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.

Answer 1

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 :-)

Answer 2

Your styling is not working because your object is ultimately rendered in dom of paper-input. So your selector is wrong. If you keep object as only selector for styling it'll work properly.

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

And i don't see why you tap listener should not work. It's working properly for me