fix: disable cancelSyntheticClickEvents globally (#3510)

vaadin · Mar 3, 2022 · f5da160 · f5da160
1 parent 711bfca
commit f5da160
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/component-base/src/element-mixin.js b/packages/component-base/src/element-mixin.js
@@ -3,11 +3,18 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';
 import { usageStatistics } from '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js';
 import { idlePeriod } from './async.js';
 import { Debouncer, enqueueDebouncer } from './debounce.js';
 import { DirMixin } from './dir-mixin.js';
 
+// This setting affects the legacy Polymer gestures which get activated
+// once you import any iron component e.g iron-icon.
+// It has to be explicitly disabled to prevent click issues in iOS + VoiceOver
+// for buttons that are based on `[role=button]` e.g vaadin-button.
+setCancelSyntheticClickEvents(false);
+
 window.Vaadin = window.Vaadin || {};
 
 /**

diff --git a/packages/component-base/test/element-mixin.test.js b/packages/component-base/test/element-mixin.test.js
@@ -33,6 +33,11 @@ describe('ElementMixin', () => {
       expect(window.Vaadin.developmentModeCallback).to.be.instanceOf(Object);
       expect(window.Vaadin.developmentModeCallback['vaadin-usage-statistics']).to.be.instanceOf(Function);
     });
+
+    it('should set the Polymer cancelSyntheticClickEvents setting to false', async () => {
+      const { cancelSyntheticClickEvents } = await import('@polymer/polymer/lib/utils/settings.js');
+      expect(cancelSyntheticClickEvents).to.be.false;
+    });
   });
 
   describe('version', () => {