Prevent dropdown from closing automatically?

[abemusic]

Hey all,

I'm wanting to use the dropdown component to hold a list of checkboxes for filtering results retreived from an API. Everything is working fine, but each time I check/uncheck a box the dropdown closes, which makes for a pretty bad experience in my opinion. I've tried to use the $event which interacting with the checkboxes, but I can't seem to stop the click event from propagating to the directive that closes the dropdown.

Any ideas or some workarounds I might attempt to prevent the dropdown from closing under certain circumstances?

Thanks!

[drasill]

I have a directive inside a dropdown, which may need to be clicked without closing it.

I use a workaround like :

<my-directive stop-event .... ></my-directive>

And in the directive link (sorry it's coffeescript) :

link: (scope, element, attrs) ->
    element.on 'click', (event) ->
        if not _.isUndefined(attrs.stopEvent)
            event.stopPropagation()
            event.preventDefault()
        doMoreThings()

A generic class, like "dropdown-no-close", on any element in the dropdown, which would prevent closing it when clicked, would be cleaner. But it would not follow foundation's base, I don't know if it's okay for the project ?

[jbrowning]

Thanks for the report @abemusic. I can see where an option to leave the dropdown open after a click could be useful. Care to submit a pull request? 😸

[jnlsn]

I came to remark on just this thing! The vanilla foundation way is with the attribute aria-autoclose="false". Would be nice if angular-foundation had something similar. Though for my needs I would also like to programmatically close the dropdown on certain actions. Or perhaps have an attribute on certain elements that allow the dropdown to close. I'm pretty new to angular so I'm not sure how best to implement that.

[jnlsn]

Based on drasill's response, I came up with a solution that will work well enough for me. Hopefully this helps someone else.
dropdownPersist directive:

function dropdownPersist(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
            elem.on('click', function(e){
                if(angular.equals(attrs.dropdownPersist, 'true')){
                    e.stopPropagation();
                    e.preventDefault();
                }
            });
        },
    };
}

and in my template html:

<a dropdown-toggle="#dropdown-dealer-switch" ng-click="persist='true'">Show Dropdown</a>

<div id="dropdown-dealer-switch" class="f-dropdown content medium" dropdown-persist="{{ persist }}">
    <button ng-click="persist='false'">Close me</button>
</div>

[bgilhome]

I've implemented this using the current Foundation's method of specifying an aria-autoclose attribute on elements to either enable/disable closing the dropdown. Elements contained within a dropdown can be disabled from closing the dropdown by adding aria-autoclose="false".

I've also allowed specifying the attribute on the dropdown element itself to disable click on all contained elements from closing the dropdown, unless they specify an attribute aria-autoclose="true".

Pull request #230

[LauraLalune]

Hi, I'm using the persistent dropdown by foundation in order to open a sub dropdown when clicking on a link (wanted to combine it with hoverable link to have a pattern as in Semantic UI. I can't find any solution: the persistent dropdown closes when I click on the link which opens another dropdown.
Did some of you solve this issue? I also read here foundation/foundation-sites#4341 and see they won't fix this. Apparently they don't think it is a common and useful ui pattern.

This is not the first time I have problems with dropdowns or advanced options on foundation elements. I'm really considering switching to another framework. I sponsored foundation in my organization mainly for its structure, lightness and grid system but will admit the support sucks and ruin all the good work they've done.