search

googlearchive / polymer-gestures

84 stars 27 forks source link

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

Closed frankiefu closed 10 years ago

frankiefu commented 10 years ago

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: https://github.com/Polymer/polymer-gestures/commit/398ba03b5d024f0cd794a18a08aff953d2986545

<!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 10 years ago

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>