googlearchive/polymer-gestures

on iOS, <content on-tap="{{...}}"> doesn't work

Closed this issue · 1 comments

frankiefu commented

To reproduce the issue, run the sample code on iOS, you will see tapHandler is not being called. The same code works fine in 0.4.2.
The bug seems to be introduced by this commit: 398ba03

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="components/core-icons/core-icons.html">
  <link rel="import" href="components/core-icon-button/core-icon-button.html">
  <link rel="import" href="components/paper-icon-button/paper-icon-button.html">
</head>
<body>

  <polymer-element name="x-test">
    <template>
      <content select=".menuButton" on-tap="{{tapHandler}}">
        <core-icon-button icon="menu"></core-icon-button>
      </content>
    </template>
    <script>
      Polymer({
        tapHandler: function() {
          console.log('tapped!!!');
        }
      })
    </script>
  </polymer-element>

  <x-test>
    <paper-icon-button class="menuButton" icon="menu"></paper-icon-button>
  </x-test>

</body>
</html>
frankiefu commented

Also doesn't work if you put a div around the content node and set the on-tap on the div.

  <polymer-element name="x-test">
    <template>
      <div on-tap="{{tapHandler}}">
        <content select=".menuButton"></content>
      </div>
    </template>
    <script>
      Polymer({
        tapHandler: function() {
          console.log('tapped!!!');
        }
      })
    </script>
  </polymer-element>

  <x-test>
    <paper-icon-button class="menuButton" icon="menu"></paper-icon-button>
  </x-test>