ui-sref not working with ba-close

[Seb-]

I tried to upgrade to 2.0, but I have links inside a ba-panel that are not working anymore.

Clicking the link should open a new page and close the panel, so it had ba-close together with ui-sref.

This worked fine before but does not work now.

Removing the ba-close allows to change page but the panel doesn't close.

Leaving the ba-close and ui-sref allows to close the panel, but the page does not change.

This is written in the doc but I think it's not working at all:

Links (any element with an href or ui-sref attribute) inside panels automatically close the panel when clicked.

Also if you change this behaviour, it should be written in the migration doc. And then what is the solution if we want to change page and to keep the panel open?

[soumak77]

@Seb- Please provide an example of your use case.

The following use case is working in the docs:

• Resize browser to match small device
• Click Show Components at the top
• Click a link inside the panel

The panel will close and navigate to the desired link.

[Seb-]

Here is a snippet:

<a ba-open="menuPanel"><i ba-open="menuPanel" class="fi-list"></i> <span ba-open="menuPanel" translate>TITLE_BAR.MENU</span></a>

<ba-panel id="menuPanel" position="left" ba-swipe-close="left">
            <a ui-sref="home" ui-sref-active="is-active"><i class="fi-home"></i> <span translate>MENU.HOME</span></a>
            <a ui-sref="about" ui-sref-active="is-active"><i class="fi-info"></i> <span translate>MENU.ABOUT</span></a>
</ba-panel>

With this the panel doesn't close when clicking the links. It never did.

But as I said before I just added zf-close in the links to make sure it works. But as of 2.0 this trick is broken.

[soumak77]

Not sure if you just had a typo, but did you try zf-close or ba-close? Please provide the markup that isn't working and I'll see if I can figure this out. If you can create a jsfiddle or other online example that would help as well.

Your current example is working as expected. Adding ba-close="" to the <a> tags should cause the panel to close when clicking the links. Adding ba-close="" to the <ba-panel> would cause it to close clicking anywhere inside the panel. Please also try removing ba-swipe-close="left" when testing as that directive may be interfering with the others.

[Seb-]

You can test it with this: https://github.com/Seb-/test-for-angular-base-apps

[Seb-]

Note that the example has been stripped too much from my original project, and adding ba-close to the links there will indeed close the panel. I will need to re-add my features progressively to notice at which point the links start to fail with ba-close.

The example still shows that the panel does not auto-close when a link is clicked, which is the opposite of what the doc says.

[Seb-]

Following more testing and all things aside similar, this works:

<ba-panel id="menuPanel">
    <a ba-close class="close-button">x</a>
    <ul class="sideMenu">
        <li><a ui-sref="home" ba-close>Home</li>
        <li><a ui-sref="about" ba-close>About</a></li>
    </ul>
</ba-panel>

and this doesn't:

<ba-panel id="menuPanel">
    <a ba-close class="close-button">x</a>
    <ul class="sideMenu">
        <li><a ui-sref="home" ba-close><span>Home</span></li>
        <li><a ui-sref="about" ba-close><span>About</span></a></li>
    </ul>
</ba-panel>

The issue is as soon as the click happens on a child element inside the link. (above example calls ba-close fine but not ui-sref)

This was working fine before version 2.

With <li><a ui-sref="home" ba-close><b>test</b>HOME</a></li> clicking on "HOME" works, not on "test".

[soumak77]

@Seb- you're missing the closing </a> tag on your home link

[Seb-]

Sorry I guess I deleted too much while cleaning up, but it doesn't change the issue though, adding it won't work better, and the other link doesn't work either.

[soumak77]

dang, it's never that easy... I'll look into it.

[soumak77]

@Seb- I found the issue. The original fix only fixes the case when the clicked element has the href attribute. In your example, the parent of the clicked element is the one with the href attribute.

I'll get this fixed and published in the next patch release.

[Seb-]

Thank you, ba-close works as intended now.

This note in the doc is still wrong though:

Links (any element with an href or ui-sref attribute) inside panels automatically close the panel when clicked.