In my current project, I am utilizing Stencil.js (typescript) and need to integrate this selectbox.
Below is the code snippet:
import { Component, h, JSX, Prop, Element } from '@stencil/core';
import Selectr from 'mobius1-selectr';
@Component({
tag: 'bldc-selectbox',
styleUrl: 'bldc-selectbox.scss',
shadow: true
})
export class BldcSelectbox {
@Element() el: HTMLElement;
componentDidLoad() {
//initialize selectbox
new Selectr(this.el.shadowRoot.querySelector('#mySelect') as HTMLOptionElement, {// document.getElementById('mySelect'), {
searchable: true,
width: 300
});
}
render(): JSX.Element {
return <div>
<section>
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</section>
</div>
}
}
If you take a look at the provided image, you can see that it displays correctly, but lacks functionality when clicked on.
https://i.stack.imgur.com/XNpdk.png
Update 1: I have discovered that the selectbox works properly without any CSS styling applied.