2

I have a LWC and a lightning-combobox inside it, but while the dropdown items are open and I scroll the page, the menu items are still visible on top of other items. I need to auto-hide the menu items on page scroll. Please help that how this can be achieved. Thanks in advance. HTML CODE

<div class="slds-size_1-of-3 slds-grid slds-gutters combobox-alignment">
            <div class="row slds-grid slds-gutters slds-align_absolute-center">
               <span class="slds-m-left_large slds-truncate slds-cell-wrap content-display">
                  <lightning-combobox name="selectednumberlist" value={selected_number_list} options={selectedOptions}
                     onchange={handleChange} variant="label-hidden" dropdown-alignment="auto" class="combobox-width">
                  </lightning-combobox>
               </span>
            </div>
         </div>

JS CODE

    @track selected_number_list = '10';

    get selectedOptions() {
        return [
            { value: '10', label: '10'},
            { value: '25', label: '25'},
            { value: '50', label: '50'},
            { value: '75', label: '75'},
            { value: '100', label: '100'}
        ];
    }

    handleChange(event) {
        this.selected_number_list = event.detail.value;
    }

The following is the screenshot of the problem being faced Overlapping Issue

3
  • It shall go away on its own when you select one option or click outside or focus on another element on the page. Is there any reason why you want to hide that on scroll? Dec 3, 2020 at 8:32
  • @rahulgawale Yes, it works fine if a selection is made or clicking anywhere outside. But the issue is, "If the dropdown list is open and someone scroll it". At this point, we are facing this issue and QA team wants it to be fixed :(, though it might rarely be encountered.
    – Makc M
    Dec 3, 2020 at 13:19
  • You can fix this, first inspect and get the styles to be applied, then add those styles to a static resource, then load resource using loadstyle in LWC. But keep in mind that this CSS will be applicable to all of the components. So be specific with CSS selectors. Dec 3, 2020 at 13:32

1 Answer 1

2

I was also facing same issue with combobox. I gave it below fix. you can provide onwheel event in HTML of your LWc and in its handler put the below code

OnscrollHandler(event) {
   if(window.pageYOffset > 0) {
   //show hide your dropdown by boolean flags
   this.showalloptions = false;
   this.showoptions = false;
   }
}

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.