*_Expected behavior_*Select looks normally when placed inside a modal.

*_Actual behavior_*Select outline strikes through the label of select. I tried specifying data-mdb-container but to no avail.

Resources (screenshots, code snippets etc.)

<div class="modal fade" id="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="acceptModalLabel">Распределить пользователя</h5>
            </div>
            <form method="post" action="...">
                <div class="modal-body">
                    <select class="select-input" id="..." name="..." required>
                        <option disabled>Выберите...</option>
                        <option>...</option>
                    </select>
                    <label class="form-label select-label">
                        <span>Группа</span><span style="color: #8b0000;"> *</span>
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-..." data-mdb-dismiss="modal">
                        Отмена
                    </button>
                    <button type="submit" class="btn btn-...">Распределить</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function getDefaultSelectProps() {
        return {
            noResultText: 'Ничего не найдено./Nothing found.',
            searchPlaceholder: 'Искать/Search...',
            optionsSelectedLabel: 'Выбрано/selected',
            selectAllLabel: 'Выбрать все/Select all',
            visibleOptions: 7,
            optionHeight: 44
        };
    }

    $( document ).ready( function () {
        const selects = document.querySelectorAll('.select-input');
        selects.forEach( element => {
            let props = getDefaultSelectProps();
            if ( element.getAttribute( "data-mdb-filter" ) === true || element.getAttribute( "data-mdb-filter" ) === 'true' ) {
                props.filter = true;
            }
           const simpleSelect = new mdb.Select( element, props);
            if ( element.id != null ) {
                element.addEventListener('valueChange.mdb.select', (e) => {
                    //some custom logic on option select
                })
            }
        } )
    }
</script>