3

I am trying to solve the same problem as this question here - How to Close SLDS Dropdown Menu when clicked outside in Lightning Component?

There does not seem to be an official answer for this question.

I am new to Stack Exchange so I can't comment on the other question, hence I am posting this question.

Does anyone have any new information regarding this issue?

I have tried the tabIndex="0" approach on the div -

<div tabIndex="0" onblur="{!c.exitMultiSelect}"  class="slds-combobox_container slds-p-left_xx-small slds-p-right_xx-small zslds-size_small">

Thanks!

3
  • Welcome to SFSE! Thanks for including a link to provide context. If you have any code, though, of what you've tried, could you please edit your question and include that code? Make sure you use the {} button to format your code for legibility. – sfdcfox Jun 5 '18 at 5:43
  • I have tried using the tabIndex="0" onblur approach on the div in my component. Thanks, I edited the code. – user57279 Jun 5 '18 at 5:50
  • Hi, Can you clarify? Is it a custom lookup? Which shows another component as a drop-down. And you are trying to close it when clicked outside of this drop-down? – Vivek Makkar Aug 10 '18 at 11:07
3
+50

Just use the onblur event and $A.util.toggleClass or $A.util.removeClass like so:

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

    <aura:attribute name="options" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aura:id="myMenu">
        <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More" onclick="{!c.showHide}" onblur="{!c.hideOnBlur}"/>
        <div class="slds-dropdown slds-dropdown_left">
            <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                <aura:iteration items="{!v.options}" var="item" indexVar="i">
                    <li class="slds-dropdown__item" role="presentation">
                        <a href="javascript:void(0);" role="menuitem" tabindex="0">
                            <span class="slds-truncate" title="{!item.label}">{!item.label}</span>
                        </a>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </div>

</aura:component>

Controller JS

({
    doInit: function(component, event, helper) {
        var options = [
            {'label': 'Label1', 'value': 'Value1'},
            {'label': 'Label2', 'value': 'Value2'},
            {'label': 'Label3', 'value':'Value3'}
        ];
        component.set("v.options", options);
        helper.showHide(component, event, helper);
    },

    showHide : function(component, event, helper){
        helper.showHide(component, event, helper);
    },

    hideOnBlur : function(component, event, helper){
        var myMenu = component.find('myMenu');
        $A.util.removeClass(myMenu, 'slds-is-open');
    },

})

Helper JS

({
    showHide : function(component, event, helper){
        var myMenu = component.find('myMenu');
        $A.util.toggleClass(myMenu, 'slds-is-open');
    },
})
0

Updated

    hideOnBlur : function(component, event, helper){
            var myMenu = component.find('myMenu');
        /*Without timeout Click function on the menu list won't trigger
       closes the menu before it could trigger */
       window.setTimeout(   
                $A.getCallback(function() {
                    $A.util.toggleClass(myMenu,'slds-is-open');
             }), 250);
2
  • I don't think that is really necessary. It worked for me without the timeout. But anyway, I am glad you got it to work! – Lightning Evangelist Aug 9 '18 at 17:59
  • yeah actually wrote an onclick event on values inside the menu without timeOut. It just closes and never triggers the onclick event.- you cool big thanks to you – SFDC Aug 10 '18 at 5:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.