Lightning Web Component Close Popovers Feature

The Context?

Popovers are simple yet important part of any UI. They act as an informational dialog?box or there can be?a?miniature?input form as well.?Since popovers are not active until users?perform certain action like clicking a button, they stay?on top of your page and whenever user clicks outside of the popover it gets disabled or closed.?A common use case is where there is a data table and for each row of data, popovers are placed to showcase additional information.?Initially?they?remain?inactive?but?when?user?clicks?a?button,?they?become active.?Our objective is to close popover when user clicks outside of its region.??

Approach?

• ‘mouseenter’ and ‘mouseout’ events are used to identify mouse clicks inside and outside the popover respectively.?
• Toggle ‘slds-hide’ class on button click, since on page load popovers will remain hidden.?
• Add an event listener on button click, which will listen for ‘mousedown’ event.?
• Now whenever user clicks outside of the popover, ‘mouseout’ action (mouseOutHandler) will be called and a Boolean value will be set to indicate actions. You can either set?mousein?or mouseout.?

• In?an?event listener where popover is already active, we are going to hide the?popover?using ‘slds-hide’,?only if?click action is occurred outside the popover (this.mouseinpopover = false).??

Example:??

Output??

You can access the code?here??

References?

1. SLDS popovers?https://www.lightningdesignsystem.com/components/popovers/?

2. SLDS data tables?https://www.lightningdesignsystem.com/components/data-tables/?

3. mouseleave?https://www.w3schools.com/jsref/event_onmouseleave.asp?

4. mouseenter?https://www.w3schools.com/jsref/event_onmouseenter.asp?

5. mousedown?https://www.w3schools.com/jsref/event_onmousedown.asp

?Reach Us

We are a digital innovations services company that leverages the latest technologies and methodologies to create solutions that deliver value for you and your customers. We practice creative engineering, innovation, and product development culture to deliver high-quality products and consulting for you.

corp.infogen-labs.com?

• Business Enquiry:??[email protected]