[Bug] Styling Clash with Choices.js

[devandreassimmeth]

Version

1.1.1

Reproduction link

http://example.com

Operating System

Windows

Device

Lenovo ThinkPad

Browser & Version

Chrome(110.0.5481.178) / Firefox(newest)

Steps to reproduce

1. Create a new Angular project.

2. Install packages: "bootstrap": "5.2.3", "choices.js": "9.0.1", "popper.js": "^1.16.1" (you can also use the newest choices version, same error here)

3. Add ReactiveForms to Angular project.

4. Add Soft UI Design System PRO scss/js to assets.

5. Add styles/scripts to angular.json:

"styles": [
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/choices.js/public/assets/styles/choices.min.css",
"apps/my-app/src/assets/scss/soft-design-system-pro.scss", // Path is like that because we use Nx
...
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/choices.js/public/assets/scripts/choices.min.js",
"apps/my-app/src/assets/js/soft-design-system-pro.min.js",
...
]

6. Add form-element to page:

<label class="form-label" for="selectExample">Example:</label>
<select id="selectExample" #selectExample formControlName="example">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

7. Add Choices over Component:

export class ExampleComponent implements AfterViewInit {
  @ViewChild("selectExample") exampleRef!: ElementRef;

  // Create form in constructor or ngOnInit

  ngAfterViewInit() {
    const selectElement = this.exampleRef.nativeElement;
    const choices = new Choices(selectElement);
  }

}

What is expected?

I expect that the Select is displayed like e.g. here (I used dashboard as example, because I don't find a usage in the Soft UI Design System PRO docs):
https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/pages/account/settings.html#basic-info

What is actually happening?

The select is rendered, but instead of the arrow at the end of the field, I have a rectangle (so something that is not found) and the arrow of choices.js is places in the top-left corner of this rectangle.

---

Solution

I tried to swap the libraries in the style imports. This fixes the issue, but then the Creative Tim styles are not applied to the input field, so it fixes the only semi.

Additional comments

Sorry for not adding a link with the reproduce. Hope it's ok without. If not, please let me know and I will take the time to create one.
And also to avoid confusion: The order ID runs to a different mail address than the one associated with my account. This is because we use Gitlab in the company, so we don't have a Github account. So for simplicity I used my private Github account.