2

I am using SLDS Picklist in Aura Component, I am trying to close the picklist when user clicked outside the picklist. I am trying to bind a click event to document and call the action to close the picklist. To achieve this I am calling

document.addEventListener("click",function(){
                $A.util.toggleClass(picklist,'slds-is-open');
            });

I am doing this when the user clicks on the picklist, but When I click on the picklist it is setting the click event on document, it is being fired on the same click and closes the picklist. Is there a better way to achieve this functionality?.

  • addEventListener click is being executed before it is intended to execute. I think the problem is here. Not yet able to figure out why it is being called prior – Vijay Nov 11 '16 at 21:09
0

Check this out: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element.

You need to add a separate event to your actual picklist element to prevent the event from bubbling up to the document and triggering the handler.

0

You can see implementation of strike components. https://github.com/appiphony/Strike-Components/blob/master/aura/strike_multiSelectPicklist/strike_multiSelectPicklistController.js

What they have done is

component.closeMenu = $A.getCallback(function() {
            if (component.isValid()) {
                $A.util.toggleClass(picklist,'slds-is-open');

            } else {
                window.removeEventListener('click', component.closeMenu);
            }
        });

        window.addEventListener('click', component.closeMenu);

I think $A.getCallback(function() {}) is missing in your implementation. And also function reference is stored on component(component.closeMenu) itself. (You can store any value in component just by using component. = 'value'. you can use this value afterwards. This is not recommended way to store any value)

Another way to do so is by using a hidden div.

<div>
   <your HTMl for dropdown>
   <div class="hiddenDiv" onclick="{!c.hidePopover}"/>
<div>

and in your css

.THIS .hiddenDiv{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    position: fixed;
}

now in hidePopover action you have to add slds-hide class to hiddenDiv and hide dropdown also

0

Things have changed over the years, but because this question was bumped to homepage:

Today you can just use lightnig:select

<lightning:select aura:id="select" name="select1" label="How many tickets?" required="true">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</lightning:select>

Auto close of picklist after loosing focus is of course already handled :) To focus on that picklist again you can use focus() method.

Full example with controller:

<aura:component>
    <lightning:select aura:id="select" name="select1" label="How many tickets?" required="true">
        <option value="">choose one...</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </lightning:select>
    <lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>
</aura:component>

Controller:

    handleClick : function(component, event, helper){
       component.find("select").focus();
   }

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.