[Close Button] data-off-canvas incompatible with data-smooth-scroll

[sirtimbly]

How to reproduce this bug:

1. Create an off canvas menu div with the attribute data-off-canvas, inside create a menu containing a data-close attribute on one of it's items.

<div class="off-canvas position-top menu-drawer" id="offcanvas" data-off-canvas data-smooth-scroll>
              <div class="grid-container">
                  
                  <ul class="menu align-center" >
                      {{> nav-links}}
                      <li>
                        <button class="off-canvas-close-button" aria-label="Close menu" type="button" data-close>
                          <span aria-hidden="true"><i class="fa fa-angle-up"></i></span>
                        </button>
                      </li>
                    </ul>
              </div>
              
          </div>

2. try adding the data-smooth-scroll attribute on the menu ul
3. in the browser, open the off-canvas menu then click the close button within that menu

What should happen:

The off-canvas menu that is visible should close/hide itself.

What happened instead:

The off-canvas menu does not close. Nothing closes unless you click outside of the off-canvas div.

Browser(s) and Device(s) tested on:

Safari 10 Chrome 60 Firefox 54

Foundation Version(s) you are using:

6.4.2

Test case link:

CodePen demonstration of issue

[IamManchanda]

So you basically want to close a off canvas with a smooth scroll functionality?

[SassNinja]

@sirtimbly I'm wondering why you are adding data-smooth-scroll to the whole off-canvas instead of to the menu only (as shown in the docs).

However, the problem here is the smoothScroll plugin has a click event listener on the whole data-smooth-scroll element and returns false if the clicked item isn't an anchor link. This stops the close button working if it's placed in the menu.

I think changing this

if(!$(this).is('a[href^="#"]'))  {
    return false;
}

into this will fix it

if(!$(this).is('a[href^="#"]'))  {
    return;
}

@kball @IamManchanda what do you think?

[sirtimbly]

@SassNinja right, sorry my example was incorrect I first tried adding smooth-scroll on the menu element and it had the same effect.

[IamManchanda]

@SassNinja Have some testing once and lets see from there! Ping me in with the tests infact!

[cnc137]

I noticed that the "Close" button wasn't working in my Off-canvas project also using the instructions on http://foundation.zurb.com/sites/docs/off-canvas.html. Actually, even if you click the "X" that appears and then disappears on the right when you click "Open Right with Push" under the "Off-canvas Transitions" section it doesn't work in the documentation.

I believe this is related to the z-index value of the "close-button" class in the CSS. If you look at the CSS for "close-button" below you will see it is positioned absolutely.

.close-button {
  position: absolute;
  color: #8a8a8a;
  cursor: pointer;
}

[data-whatinput='mouse'] .close-button {
  outline: 0;
}

.close-button:focus,
.close-button:hover {
  color: #0a0a0a;
}

.close-button.small {
  right: 0.66rem;
  top: 0.33em;
  font-size: 1.5em;
  line-height: 1;
}

.close-button,
.close-button.medium {
  right: 1rem;
  top: 0.5rem;
  font-size: 2em;
  line-height: 1;
}

I ended up adding the following in my additional CSS to get the "X" working for my project:

.close-button {
  z-index: 100;
}

I noticed in your example code on CodePen that you changed the class on the button from "close-button" to "off-canvas-close-button". Remember to switch that back to "close-button" for testing the fix above.

I am not sure if it will fix your problem, but maybe it will help with diagnosing it.