Angular ui-select component : Broken after migrating to Bootstrap 4

Question

I have a very simple ui-select component in my application like in the following examples : http://angular-ui.github.io/ui-select/demo-basic.html

After migrating from Bootstrap 3 to Bootstrap 4. The component is still here but the results are not displayed.

What I've tried so far :

1. I used the console to check that they were in the code and they are.
2. I tried to add dropdown-item class into the results but it didn't work

Answer 1

Turns out in BS4, the menu is displayed only when the show class is present along with the dropdown-menu class and not displayed otherwise :

.dropdown-menu.show {
      display: block;
}

To fix my issue I had to take this part from BS3 and copy it into my own app style :

.open > .dropdown-menu {
     display: block;
}

I'm well aware that this is not the proper way to do it but it will do the trick until angular-ui receive a BS4 ready update.

Answer 2

I had the same issue and adding following css classes to Style.css resolved it.

/**
 * ui-select.bootstrap4.shim.css
 *
 * Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
 * component to Bootstrap v4.x look and feel.
 * Bootstrap v4.x look and feel
 *
 * Feel free to test and open issues and pull requests.
 *
 * @see       https://angular-ui.github.io/ui-select/
 *
 * @project   ui-select.bootstrap4.shim.css
 * @version   1-20180706
 * @author    Francis Vagner dos Anjos Fontoura
 * @copyright 2018 by the author
 * @cssdoc    version 1.0-pre
 * @license   MIT
 */

.pull-left {
    float: left !important;
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
    display: inline-block;
    margin-left: 0;
    vertical-align: middle;
    width: 0;
}

.pull-right {
    float: right !important;
}

.ui-select-toggle.btn {
    border: 1px solid #ced4da;
}

.ui-select-choices.dropdown-menu {
    display: block;
}

.ui-select-match-text {
    max-height: 24px;
}

.ui-select-match.btn-default-focus {
    border-radius: .25rem;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: 0;
}

.ui-select-match.btn-default-focus > .ui-select-toggle {
    border-color: #80bdff;
}

Reference : https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css/blob/master/ui-select.bootstrap4.shim.css