Add comments and rework condition to consider explicit forceFollow:false

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index 2b308efb054c088d981ff5cfe98976ecccd8966f..0ad038b9853bf75ad75a42c23ba906b78b601581 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -141,11 +141,13 @@ class Dropdown extends Positionable {
       .on('click.zf.trigger', function(e) {
         _this._setCurrentAnchor(this);
 
-        if (_this.options.forceFollow && hasTouch && _this.options.hover) {
-          var hasClicked = $(this).attr('data-is-click') === true;
-          if (hasClicked === false && _this.$element.attr('aria-hidden') === 'true') {
-            e.preventDefault();
-          }
+        if (_this.options.forceFollow === false) {
+          // if forceFollow false, always prevent default action
+          e.preventDefault();
+        } else if (hasTouch && _this.options.hover && _this.$element.hasClass('is-open') === false) {
+          // if forceFollow true and hover option true, only prevent default action on 1st click
+          // on 2nd click (dropown opened) the default action (e.g. follow a href) gets executed
+          e.preventDefault();
         }
     });
 
@@ -419,7 +421,7 @@ Dropdown.defaults = {
    */
   closeOnClick: false,
   /**
-   * Boolean to force overide the clicking of toggle link (href) to perform default action, on second touch event for mobile.
+   * If true the default action of the toggle (e.g. follow a link with href) gets executed on click. If hover option is also true the default action gets prevented on first click for mobile / touch devices and executed on second click. 
    * @option
    * @type {boolean}
    * @default true

diff --git a/test/visual/dropdown/linked-dropdown-toggle.html b/test/visual/dropdown/linked-dropdown-toggle.html
index ba9d2db50afc23b187c0cb678997863e9fe56cb0..c3ca65a05577b64934ddc7348dd5ff01dd1215c1 100644 (file)
--- a/test/visual/dropdown/linked-dropdown-toggle.html
+++ b/test/visual/dropdown/linked-dropdown-toggle.html
@@ -16,7 +16,7 @@
 
           <p>This test is supposed to show a linked dropdown toggle <strong>with enabled hover option</strong>.<br>On desktop mouseover opens the dropdown pane and click opens the link's href.<br>On mobile the first touch opens the dropdown pane and the second touch (while still opened) opens the link's href.</p>
 
-          <div class="button-group">
+          <div class="stacked-for-small button-group">
             <a href="https://www.google.com" class="button" data-toggle="example-dropdown-1">Linked Hoverable Dropdown</a>
             <button type="button" class=" secondary button" data-toggle="example-dropdown-2">Hoverable Dropdown</button>
             <button type="button" class=" secondary button" data-toggle="example-dropdown-3">Clickable Dropdown</button>
@@ -32,6 +32,14 @@
             This is a clickable dropdown.
           </div>
 
+          <p>If having set the option <code>forceFollow:false</code> the default action gets always prevented and thus the linked dropdown toggle will never open the link's href.</p>
+
+          <a href="https://www.google.com" class="button" data-toggle="example-dropdown-4">Linked Dropdown with forceFollow false</a>
+
+          <div class="dropdown-pane" id="example-dropdown-4" data-dropdown data-hover="true" data-hover-pane="true" data-force-follow="false">
+            This is a linked hover dropdown with forceFollow set false. The link's href gets never opened no matter how often you click.
+          </div>
+
         </div>
       </div>
     </div>