[SalesForce] Unable to Close Drop down menu on Outside click in LWC

I am unable to close the dropdown menu in LWC on clicking anywhere else on the page apart from the dropdown menu . Please find the code below ,

HTML Code :

<a class="userStyle" role="button" href="#" onclick={displayUser}></a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item drop-down" href={profileURL}>User Profile</a>
                                <a class="dropdown-item drop-down" href={STCURL}>Service Terms &amp; Conditions</a>
                                <a class="dropdown-item drop-down" href={logoutURL}>Logout</a>
                            </div>

Javascript Code :

 displayUser(e) {
    e.preventDefault();
    let displayStyle = this.template.querySelector("div.dropdown-menu").style
      .display;
    if (displayStyle === "none" || displayStyle === "") {
      this.template.querySelector("div.dropdown-menu").style.display = "block";
    } else {
      this.template.querySelector("div.dropdown-menu").style.display = "none";

    }
  }

Javscript Code I am trying to add for closing the above mentioned dropdown on outside click in ConnectedCallback() function :

connectedCallback() {
    window.addEventListener("mouseup" , (e) => {
      console.log("Into mouseup");
      let dropdown =  this.template.querySelector("div.dropdown-menu");
      if(e.target != dropdown && e.target.parentNode != dropdown) {
        console.log("Into If");
        dropdown.style.display = 'none';
      }
    });
}

Note : The above addEventListener Function is getting executed on all page clicks , but is not letting me open the dropdown itself as the If Function is getting executed for the Actual Dropdown anchor tag click as well which is preventing the dropdown from opening .

Please help regarding the same and let me know if u need any more details on the same.

Best Answer

To open the dropdown you've used an onclick handler. From your description the dropdown should disappear when clicking outside of that anchor element.

Handle an event when the anchor loses focus by adding onblur handler to the anchor. This event handler should perform the logic that hides the dropdown.

This solution on its own has drawbacks such as the anchor losing focus if you press TAB.

Related Solutions

[SalesForce] Aura : Input Select , Drop Down

To just display picklist country__c related to the contact on the UI

Approach 1 using force:inputfield

Component:

<aura:component controller="testconaura">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="contact"  type="Contact" default="{ sobjectType: 'Contact' }" />
    <force:inputField value="{!v.contact.LeadSource}">
</aura:component>

Controller:

({
    doInit : function(component, event, helper) {
    var action = component.get("c.getcontact");
    action.setCallback(this, function(a) {
     component.set("v.contact", a.getReturnValue());
    });
    $A.enqueueAction(action); 
  }
})

Apex Class:

public class testconaura {
  @AuraEnabled 
  public static contact getcontact() {
    return [select id,name,LeadSource from Contact limit 1]; 
  }
}

Renderer:

There is a bug with picklist when using force:inputField for which an workaround is provided here

Lightning Components: why force:inputField picklist select renders disabled?

({
    render : function(cmp, helper) {
    var element = this.superRender();
    element[0].children[0].removeAttribute('disabled');
    return element;
}
})

Approach 2: populating pick list values dynamically through apex controller:

COPY PASTE THE EXACT CODE CHANGE THE FOLLOWING LINE IN THE APEX CLASS TO GET THE DESIRED PICKLIST

Schema.DescribeFieldResult fieldResult = contact.Leadsource.getDescribe();

Component:

<aura:component controller="dcontroller">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <ui:inputSelect label="Lead source pickval: " class="dynamic" aura:id="InputSelectDynamic"/>
</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getpickval");
        var inputsel = component.find("InputSelectDynamic");
        var opts=[];
        action.setCallback(this, function(a) {
            for(var i=0;i< a.getReturnValue().length;i++){
                opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
            }
            inputsel.set("v.options", opts);

        });
        $A.enqueueAction(action); 
        }
})

Apex class:

public class dcontroller {
    @AuraEnabled
    public static List<String> getpickval() {
        List<String> options = new List<String>();

        Schema.DescribeFieldResult fieldResult = contact.Leadsource.getDescribe();

        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

        for (Schema.PicklistEntry f: ple) {
            options.add(f.getLabel());
        }       
        return options;
    }
}

LWC – How to Handle Click Outside Element

You can't navigate outside your own template. That's one of the security features of LWC's shadow DOM. Instead, create a transparent, fixed div that covers the entire screen area, then react to that, instead:

<template>
  <div class="backdrop" onclick={closeModal}></div>
  <div class="content">... your content here ...</div>
</template>

.backdrop {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  z-index: 1000;
  /* anything else you need here */
}

For a complete example, look at Lightning Strike's Lookup component (written in Aura, but still applicable).

Best Answer

Related Solutions

[SalesForce] Aura : Input Select , Drop Down

LWC – How to Handle Click Outside Element

Related Topic