0

I found the dropdown menu code in SLDS menu, but the menu doesn't close and stays open. I tried removing the slds-dropdown-trigger, but then it behaves like on hover rather than onClick. I want to know how can i produce the dropdown menu onClick in Lightning Web Component.

2 Answers 2

0

You just need to remove the 'slds-is-open' class

template.html

<template>
    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open my-menu">
        <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="Show More">
            <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
        </button>
        <div class="slds-dropdown slds-dropdown_left">
            <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                <li class="slds-dropdown__item" role="presentation">
                    <a href="javascript:void(0);" role="menuitem" tabindex="0">
                        <span class="slds-truncate" title="Menu Item One" onclick={onClick}>Click Me!</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

component.js

onClick(){
    this.template.querySelector('.my-menu').classList.remove('slds-is-open');
}

And then you can open the menu again by doing the same in reverse, i.e:

this.template.querySelector('.my-menu').classList.add('slds-is-open');
1
  • 1
    This code worked, thanks a load, but it needs some tweaks. The querySelector returns null when executed, so instead of 'my-menu', we have to use '.my-menu'.
    – Richard
    Commented Feb 13, 2020 at 2:43
0

If you're writing an LWC component, why not use a Button Menu?

Here's a sample code for a "Button Menu with Custom onselect Behavior" example from the documentation page:

onselect.html

<template>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            Button-menu with a custom <code>onselect</code> event handler. Click the button to view its menu then select an item. The value of the item selected will be shown below.
        </h2>

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg">
            <lightning-button-menu alternative-text="Show menu" variant="border-filled" onselect={handleOnselect}>
                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
            </lightning-button-menu>
        </div>

        <div class="slds-m-vertical_medium">
            <p>The value of the menu item that was selected is: <span class="slds-text-heading_small">{selectedItemValue}</span></p>
        </div>
    </div>
</template>

onselect.js

import { LightningElement, track } from 'lwc';

export default class ButtonMenuOnselect extends LightningElement {
    @track selectedItemValue;

    handleOnselect(event) {
        this.selectedItemValue = event.detail.value;
    }
}

onselect.css

.lgc-bg {
    background-color: rgb(242, 242, 242);
}

.lgc-bg-inverse {
    background-color: rgb(22, 50, 92);
}
1
  • Problem with the above code is that I don't want to see that dropdown arrow at the end, and i tried removing it but it's class is hidden so i am unable to do so.
    – Richard
    Commented Feb 13, 2020 at 2:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .