Data binding on custom elements derived from input

[Martin Kleinschrodt]

So I've created this custom input element to get rid of the 300ms focussing delay when tapping into an input element on mobile:

<polymer-element name="fast-input" extends="input" touch-action="none" on-tap="{{ tap }}" on-mousedown="{{ mousedown }}">

    <script>

        Polymer("fast-input", {

            tap: function(event) {

                this.setSelectionRange(this.value.length, this.value.length);

            },

            mousedown: function() {

                event.preventDefault();

            }

        });

    </script>

</polymer-element>.

This works fine. Unfortunately, using a custom extension of the input element seems to mess with data binding. So this

<input is="fast-input" value="{{ myValue }}" />
<div>{{ myValue }}</div>

does no longer work.

Is this a bug or am I doing something wrong?

[Martin Kleinschrodt]

Apparently the derived element uses the wrong bind method. Overriding bind and explicitly calling HTMLElement.prototype.bind solves the problem. Seems to be some bug in CustomElements.

<polymer-element name="fast-input" extends="input" touch-action="none" on-tap="{{ tap }}" on-mousedown="{{ mousedown }}">

    <script>

        Polymer("fast-input", {

            tap: function(event) {

                this.setSelectionRange(this.value.length, this.value.length);

            },

            mousedown: function() {

                event.preventDefault();

            },

            bind: function() {

                return HTMLInputElement.prototype.bind.apply(this, arguments);

            }

        });

    </script>

</polymer-element>

[Steve Orvell]

There was a bug related to this that I believe has been addressed.

Would you mind checking if this is fixed if you use polymer master?

One easy way to do this is via bower:

bower install Polymer/polymer#master.

Thanks

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Martin Kleinschrodt]

Yep, this seems to be fixed in master. Thanks! Btw, do you intend to address the input focus delay on touch devices at some point? The PointerEvents and PointerGestures polyfills are great for getting rid of the notorious 300ms click delay (by using the tap event instead of click) but they do not address the delayed focussing when tapping on input elements.

[Eric Bidelman]

Chrome 32 android has gotten rid of the delay for mobile optimized sites!

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

[Martin Kleinschrodt]

I know, thats awesome! Doesn't help with other platforms, though.

[ijaz786b...@gmail.com]

Custom elements are a syntactical alternative to the component binding (and in fact, custom elements make use of a component binding behind the scenes). ... The contents of the params attribute are interpreted like a JavaScript object literal (just like a data-bind attribute), so you can pass arbitrary values of any type.

DataScience Training in Chennai