feat: get hideOn clickout to work on iOS

addon/components/attach-popover.js

@@ -477,8 +477,10 @@ export default Component.extend({
     }
 
     if (hideOn.indexOf('clickout') !== -1) {
-      this._hideListenersOnDocumentByEvent.click = this._hideOnClickOut;
-      document.addEventListener('click', this._hideOnClickOut);
+      const clickoutEvent = 'ontouchstart' in window ? 'touchend' : 'click';
+
+      this._hideListenersOnDocumentByEvent[clickoutEvent] = this._hideOnClickOut;
+      document.addEventListener(clickoutEvent, this._hideOnClickOut);
     }
 
     if (hideOn.indexOf('escapekey') !== -1) {

tests/integration/components/ember-attacher/hide-on-clickout-test.js

@@ -1,5 +1,5 @@
 import hbs from 'htmlbars-inline-precompile';
-import { click, find } from 'ember-native-dom-helpers';
+import { click, find, triggerEvent, waitUntil } from 'ember-native-dom-helpers';
 import { isVisible } from 'ember-attacher';
 import { moduleForComponent, test } from 'ember-qunit';
 
@@ -33,6 +33,8 @@ test('hides when an element outside the target is clicked', async function(asser
 
   await click('#focus-me');
 
+  await waitUntil(() => isVisible(attachment) === false);
+
   assert.equal(isVisible(attachment), false, 'Now hidden');
 });
 
@@ -91,5 +93,43 @@ test("with interactive=true: doesn't hide when attachment is clicked", async fun
   // Make sure attachment is hidden once an element outside target or attachment is clicked
   await click('#focus-me');
 
+  await waitUntil(() => isVisible(attachment) === false);
+
+  assert.equal(isVisible(attachment), false, 'Now hidden');
+});
+
+test('hides when an element outside the target is touched on touch devices', async function(assert) {
+  // using `ontouchstart` internally to identify if the current device is touchable
+  window.ontouchstart = () => {};
+
+  assert.expect(3);
+
+  this.render(hbs`
+    <input type="text" id="focus-me"/>
+
+    <div id="parent">
+      {{#attach-popover id='attachment'
+                        hideOn='clickout'
+                        isShown=true}}
+        hideOn click
+      {{/attach-popover}}
+    </div>
+  `);
+
+  const attachment = find('#attachment');
+
+  assert.equal(isVisible(attachment), true, 'Initially shown');
+
+  // Make sure the attachment is still shown when the target is tapped
+  await triggerEvent('#parent', 'touchend');
+
+  assert.equal(isVisible(attachment), true, 'Still shown');
+
+  await triggerEvent('#focus-me', 'touchend');
+
+  await waitUntil(() => isVisible(attachment) === false);
+
   assert.equal(isVisible(attachment), false, 'Now hidden');
+
+  delete window.ontouchstart;
 });