Foundation 5 Dropdown button not working in nested table row

Question

Dropdown button not working if the dropdown button is inside a nested table row.

Please refer to this example in jsbin: http://emberjs.jsbin.com/yesaguwoli/edit?html,output

• Click on Header 1 to show an expanded table row.
• Then, click on Dropdown Button 1. The dropdown menu does not appear after the button is clicked.
• Click on Header 2 to show an expanded table row.
• Then, click on + button. The dropdown menu does not appear after the button is clicked.

However, if you the dropdown button is located in the table row itself, the dropdown button will work fine in both places, (ie. in the table row and in the nested table row)

Refer to this example: http://emberjs.jsbin.com/mozudezewo/edit?html,css,js,output

• Click on Dropdown Button 1. The dropdown menu appears after the button is clicked.
• Click on Header 2 to show an expanded table row.
• Then, click on + button. The dropdown menu appears after the button is clicked.

I'm not sure why the dropdown button is behaving in such a way. Any help to resolve this issue is much appreciated. Thank you!

Answer 1

I have taken your working example, and wrapped it in the same {{if}} statements as your broken example (http://emberjs.jsbin.com/bubeveyapo/1/edit?html,output) and it no longer works.

This is because you are initializing the foundation dropdowns on the didInsertElement hook of the App.ApplicationView.

The problem is that when you initialize foundation, there is no .dropdown in the DOM at the time the App.ApplicationView is inserted as they are hidden by the {{if}} statements. These {{if}} tags actually remove and insert the HTML blobs in the DOM.

So what you need to do is find a way of knowing when the dropdown has been inserted and re-initialize foundation.

Foundation has a way of handling re-initialization with $(document).foundation('dropdown', 'reflow'); which will check the DOM again for anything foundation'ey and re-apply the javascript for it.

This JSbin has re-initialized foundation on the toggleDetails action, as that's when the buttons are being inserted.

Really you should look into not relying on foundation to show hide your dropdowns and look at adding {{action}} hooks on them and manually managing the show/hide. This has been answered here on SO so take a look at this question.