SLDS modals: combobox loses focus on scroll

Question

I have a modal with a lightning-combobox in it. When the combobox is in focus, the dropdown is displayed. When the user clicks elsewhere, the dropdown is hidden.

So far so good, but if the height of the dropdown exceeds the height of the modal content section, some of the dropdown options will not be visible, and users will need to scroll to see them. The problem is, when the user clicks the scrollbar, the combobox loses focus, and the dropdown becomes hidden.

I see 2 problems here / discrepancies with how web technologies normally work:

1. The dropdown doesn't overflow its container, as an HTML select element would
2. Clicking the scrollbar removes focus from other elements, which is not typical of scrollbars

I've illustrated what I understand to be typical web UI behavior for both of the above issues in this JSFiddle: http://jsfiddle.net/wb073xrv/1/

If someone can help me solve even just one one of these problems, I'll consider that a win.

Here is my sample LWC code:

app.html

<template>
    <lightning-button
        label="Open modal"
        onclick={handleButtonClick}
    ></lightning-button>
    <c-modal>
        <div style="min-height:100px;">
            <lightning-combobox
                label="Fruit selection"
                value=""
                options={comboboxOptions}
            ></lightning-combobox>
        </div>
    </c-modal>
</template>

app.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    comboboxOptions = ['Apples', 'Bananas', 'Oranges', 'Pears'].map(o => {
        return {label: o, value: o};
    });

    handleButtonClick() {
        this.template.querySelector('c-modal').open();
    }
}

modal.html

<template>
    <template if:true={isOpen}>
        <section
            role="dialog"
            tabindex="-1"
            aria-modal="true"
            aria-describedby="modal-content-id-1"
            class="slds-modal slds-fade-in-open"
        >
            <div class="slds-modal__container">
                <header class="slds-modal__header slds-modal__header_empty">
                    <lightning-button-icon
                        icon-name="utility:close"
                        alternative-text="Close"
                        variant="bare-inverse"
                        size="large"
                        title="Close"
                        onclick={handleCancel}
                        class="slds-modal__close"
                    ></lightning-button-icon>
                </header>
                <div
                    class="slds-modal__content slds-p-around_medium"
                    id="modal-content-id-1"
                >
                    <slot></slot>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button-group>
                        <lightning-button
                            variant="neutral"
                            label="Cancel"
                            onclick={handleCancel}
                        ></lightning-button>
                        <lightning-button
                            variant="brand"
                            label="OK"
                            onclick={handleAccept}
                        ></lightning-button>
                    </lightning-button-group>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

modal.js

import { LightningElement, api, track } from "lwc";

export default class CrmModal extends LightningElement {
    @track isOpen = false;

    @api
    open() {
        this.isOpen = true;
    }

    handleAccept() {
        this.isOpen = false;
    }

    handleCancel() {
        this.isOpen = false;
    }
}

Answer 1

I haven't resolved the issue with the modal scrollbar, but I have been able to work around this issue by replacing my lightning-combobox with a basic select element. I can get it to look reasonably lightning-ey by creatively applying the SLDS combobox component blueprint (although the dropdown isn't styled exactly like lightning-combobox's dropdown).

The dropdown overflows the modal container the way I want it to.

<div class="slds-form-element">
    <label class="slds-form-element__label" for="Fruits">
        Fruit selection
    </label>
    <br />
    <div class="slds-form-element__control slds-combobox_container slds-combobox">
        <div
            class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
            role="none"
        >
            <select
                name="Fruits"
                id="Fruits"
                class="slds-input slds-combobox__input"
                style="appearance: none;"
                onchange={handleFileChange}
            >
                <template
                    class="slds-dropdown slds-dropdown_fluid"
                    for:each={comboboxOptions}
                    for:item="option"
                >
                    <option
                        class="slds-text-color_weak slds-p-vertical_x-small"
                        key={option.value}
                        value={option.value}
                    >
                        {option.label}
                    </option>
                </template>
            </select>
            <span
                class="slds-icon_container slds-input__icon slds-input__icon_right"
            >
                <lightning-icon
                    icon-name="utility:down"
                    size="x-small"
                ></lightning-icon>
            </span>
        </div>
    </div>
</div>

Answer 2

Found the answer after dealing with this for months..

On the modal.css, put

.slds-modal__content {
   overflow: initial;
}

Found the answer Combobox hiding behind footer - modal content not able scroll when overflow =initial/visible from Yonathan Goriachnick comment.

Hope this helps!