[Bug] Styling Clash with Choices.js

[devandreassimmeth]

Version

1.1.1

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>

8. 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.

[github-actions]

@devandreassimmeth this issue was automatically closed because it did not follow our rules:

IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/soft-ui-design-system-pro

**If your issue was not created using the app above, it will be closed immediately.**



Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com