fix(ripple-effect): tapclick is required in ionic

core/src/components/alert/alert.tsx

@@ -286,7 +286,7 @@ export class Alert implements OverlayInterface {
                 {i.label}
               </div>
             </div>
-            {this.mode === 'md' ? <ion-ripple-effect /> : null}
+            {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
           </button>
         ))}
       </div>
@@ -306,7 +306,7 @@ export class Alert implements OverlayInterface {
                 {i.label}
               </div>
             </div>
-            {this.mode === 'md' ? <ion-ripple-effect /> : null}
+            {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
           </button>
         ))}
       </div>

core/src/components/app/app.tsx

@@ -40,7 +40,7 @@ export class App {
   render() {
     return [
       this.deviceHacks && <ion-input-shims />,
-      this.isDevice && <ion-tap-click />,
+      <ion-tap-click />,
       this.isDevice && <ion-status-tap />,
       <slot></slot>
     ];

core/src/components/back-button/back-button.tsx

@@ -63,7 +63,7 @@ export class BackButton {
         onClick={(ev) => this.onClick(ev)}>
         { backButtonIcon && <ion-icon name={backButtonIcon}/> }
         { backButtonText && <span class='button-text'>{backButtonText}</span> }
-        { this.mode === 'md' && <ion-ripple-effect/> }
+        { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </button>
     );
   }

core/src/components/button/button.tsx

@@ -157,7 +157,7 @@ export class Button {
             <span class='button-text'><slot></slot></span>
             <slot name='end'></slot>
           </span>
-          { this.mode === 'md' && <ion-ripple-effect/> }
+          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </TagType>
     );
   }

core/src/components/chip-button/chip-button.tsx

@@ -68,7 +68,7 @@ export class ChipButton {
           <span class='chip-button-inner'>
             <slot></slot>
           </span>
-          { this.mode === 'md' && <ion-ripple-effect/> }
+          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </TagType>
     );
   }

core/src/components/datetime/datetime.tsx

@@ -628,7 +628,7 @@ export class Datetime {
         aria-disabled={this.disabled ? 'true' : false}
         onClick={this.open.bind(this)}
         class='datetime-cover'>
-        {this.mode === 'md' ? <ion-ripple-effect /> : null}
+        {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
       </button>
     ];
   }

core/src/components/fab-button/fab-button.tsx

@@ -110,7 +110,7 @@ export class FabButton {
         <span class='fab-button-inner'>
           <slot></slot>
         </span>
-        { this.mode === 'md' && <ion-ripple-effect/> }
+        { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </TagType>
     );
   }

core/src/components/item/item.tsx

@@ -133,7 +133,7 @@ export class Item {
           </div>
           <slot name='end'></slot>
         </div>
-        { clickable && this.mode === 'md' && <ion-ripple-effect/> }
+        { clickable && this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </TagType>
     );
   }

core/src/components/ripple-effect/ripple-effect.tsx

@@ -14,7 +14,7 @@ export class RippleEffect {
   @Prop({context: 'dom'}) dom: DomController;
   @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
 
-  @Prop({ mutable: true }) useTapClick: boolean;
+  @Prop() useTapClick = false;
   @Watch('useTapClick')
   tapClickChanged(useTapClick: boolean) {
     this.enableListener(this, 'parent:ionActivated', useTapClick);
@@ -42,12 +42,6 @@ export class RippleEffect {
     }
   }
 
-  componentWillLoad() {
-    if (this.useTapClick === undefined) {
-      this.useTapClick = !!document.querySelector('ion-tap-click');
-    }
-  }
-
   componentDidLoad() {
     this.tapClickChanged(this.useTapClick);
   }

core/src/components/ripple-effect/test/basic/index.html

@@ -9,6 +9,7 @@
   <style>
     .my-block {
       position: relative;
+      display: block;
       background: blue;
       color: white;
       width: 300px;
@@ -54,6 +55,18 @@
             This is just a div + effect
             <ion-ripple-effect></ion-ripple-effect>
           </div>
+
+          <a class="my-block">
+            This is just a a + effect on top
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+            <ion-ripple-effect></ion-ripple-effect>
+          </a>
+
+          <button class="my-block">
+            This is just a button + effect on top
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+            <ion-ripple-effect></ion-ripple-effect>
+          </button>
         </ion-content>
 
   </ion-app>

core/src/components/segment-button/segment-button.tsx

@@ -98,7 +98,7 @@ export class SegmentButton {
         href={this.href}
         onClick={this.segmentButtonClick.bind(this)}>
           <slot></slot>
-          { this.mode === 'md' && <ion-ripple-effect/> }
+          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </TagType>
     ];
   }

core/src/components/select/select.tsx

@@ -509,7 +509,7 @@ export class Select {
         onBlur={this.onBlur.bind(this)}
         class='select-cover'>
         <slot></slot>
-        {this.mode === 'md' ? <ion-ripple-effect /> : null}
+        {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
       </button>,
       <input type='hidden' name={this.name} value={this.value}/>
     ];

core/src/components/tab-button/tab-button.tsx

@@ -87,7 +87,7 @@ export class TabButton {
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.title && <span class='tab-button-text'>{tab.title}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
-        { this.mode === 'md' && <ion-ripple-effect/> }
+        { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </a>
     ];
   }

core/stencil.config.js

@@ -5,7 +5,7 @@ const autoprefixer = require('autoprefixer');
 exports.config = {
   namespace: 'Ionic',
   bundles: [
-    { components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
+    { components: ['ion-app', 'ion-tap-click', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
     { components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
     { components: ['ion-alert', 'ion-alert-controller'] },
     { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
@@ -32,7 +32,7 @@ exports.config = {
     { components: ['ion-refresher', 'ion-refresher-content']},
     { components: ['ion-tabs', 'ion-tab', 'ion-tabbar', 'ion-tab-button'] },
     { components: ['ion-toast', 'ion-toast-controller'] },
-    { components: ['ion-tap-click', 'ion-status-tap'] },
+    { components: ['ion-status-tap'] },
     { components: ['ion-platform', 'ion-cordova-platform'] },
     { components: ['ion-hide-when', 'ion-show-when'] },
   ],