BVSelect-VanillaJS - BVSelect - Vanilla Javascript Fully Customizable SelectBox

Additional to #1: If the dropdown is opened using mouse click and the search field has been enabled, it the keyboard focus should be set into the search field immediately?

Some things that are important to add: 1 - Aria attributes 2 - Keyboard navigation 3 - Mobile close button (X)

I really like these libraries to create customized fields, but we have to take great care not to forget accessibility.

When option elements are created dynamicly, the values need to be encapsulated. Right now, this is not the case, resulting in broken html when values contain spaces.

To fix this, change:

                document.getElementById(this.selector).insertAdjacentHTML('beforeend',
                    "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");

To:

                document.getElementById(this.selector).insertAdjacentHTML('beforeend',
                    "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value=\""+properties.options[i].value+"\" >"+properties.options[i].inner_text+"</option>");

First of all, thank you for this awesome class.

I have a request / suggestion for a future enhancement: It would be nice to be able to overrule the html output via the settings.

For example: I stumbled upon a performance issue when dealing with a list of 1500 items including image previews. Allthough the image are only a few kb, i t's quite a performance hit. Therefor I needed to lazy-load them. To be able to do that I had to modify the source code.

 // Check for Attachment
 if (optionImg) {
    var has_attachment = "<img data-src=" + optionImg + " class='lazyload'>";
} 

No big deal ofcourse, but it would be super nice if such alteration could be added to the settings object.

I have loaded the BVSelect JS and CSS files into my Javascript ES6 file and created a #selectbox element.

When I try to use new BVSelect() it fails with:

Uncaught ReferenceError: BVSelect is not defined

The browser shows that the .js and .css files are loaded succesfully and my code intellisense does pick up the BVSelect class.

Here's my javascript:

    $(`
    <select id="selectbox">
      <option data-separator="true"> Select Option </option>
      <option value="1"> Option 1 </option>
      <option value="2"> Option 2 </option>
      <option value="3" disabled> Option 3 </option>
      <option value="4"> Option 4 </option>
    </select>`).appendTo(this.$contentDiv);

    var demo = new BVSelect('#selectbox'); 

An image can be added to each menu entry, but this does not get displayed for the selected item in the top selection.

Can this be added as the selected item displayed at the top should reflect the line item content for better presentation.

Please see the example below.

Thanks

Was looking into this to see if I should recommend it to a friend. Being a11y friendly is always a big deal. I noticed that I cannot use this with keyboard navigation. I cannot open a selectbox with a keyboard trigger and I cannot tab to select boxes.

I get this is your open source project and not making any demands, just saying that accessibility is an important aspect of choosing a select control with actual legal implications in the US (for the site that uses it). You might consider either prioritizing these features or clearly stating the limitation at the top of the readme