Dropdown isn't displaying properly

Question

I'm attempting to implement a package called Sumoselect for a dropdown that I have. It's pulling in data that I'm able to see in the console.

There are two major issues that I'm having:

1. The dropdown doesn't appear properly---by default it's rendering as a square. The square appears in the pic below.

2. When you type a letter into the dropdown you do see the data, but only one letter appears at a time. Here's a pic

3. Each letter/character from the data set is getting added to its own div (to the attribute).

I can't tell if there's an issue with how I've set up Sumoselect or if it's something else.

At first I was only using the package jQuery Autocomplete. I'm not sure if I'm supposed to have Sumoselect alongside it or if I only need Sumoselect by itself.

JS snippet:

import "jquery-autocomplete/jquery.autocomplete.css";
import "sumoselect/sumoselect.css";
import "jquery";
import "jquery-autocomplete/jquery.autocomplete.js";
import "sumoselect/jquery.sumoselect.js";

// initialization async IIFE
(async function() {
  const dataObj = await dataObjProm;
  console.log( dataObj);

  const table = new Table("table", dataObj.getRawData()),
        chipSet = new ChipSet("departments-chip-set", dataObj.getDepartments()), // ------- this is where the data comes in

        searchHandler = initSearchHandler(chipSet, table);

    loadCombobox(dataObj.getDepartments());
    // doSumo(dataObj.getDepartments());

// more code


function loadCombobox(chipSet) {
    $('#combobox').autocomplete({
        source: chipSet // how the data enters jQuery Autocomplete -------- I didn't see where to do this in Sumoselect, so I thought I needed to use both
    }).on("click", function() {
        console.log('cs: ' + chipSet)
        console.log("combobox clicked")
    });
    doSumo(chipSet); // ----- not sure if this right here is correct
}

function doSumo(_target, chipSet) {
    if($(_target).html().length <= 0) {
        $(_target).append(chipSet.map(function(v){
            return "<option title='" + v + "'>" + v + "</option>";
        }).join(" "));
        $("#combobox").SumoSelect({
            okCancelInMulti: true,
            search: true,
            selectAll: true
        });

        $('.btnOk').on('click', function() {
            var obj = [],
                items = '';
            $('#combobox option:selected').each(function(i) {
                obj.push($(this).val());
            $('#combobox')[0].sumo.unSelectItem(i);
            });
            for(var i=0;i<obj.length;i++) {items += ' ' + obj[i]};
            alert(items);
        });
    }
}

html:

<select multiple="multiple" id="combobox" placeholder="Browse">
    </select>

Answer 1

This happens because the parent container width is less and the texts inside the dropdown is applied a word-break.

The possible solution is to increase the available parent width so that even when the work breaks, its readable. See the example below with less width and normal.

$(document).ready(function() {
  $('.fixed-width select').SumoSelect();
  $('.normal-width select').SumoSelect();
});

.fixed-width {
  width: 50px;
}

.fixed-width .SumoSelect {
  width: 100%;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>

Fixed Width
<div class="fixed-width">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

<br><br> 

Normal Width
<div class="normal-width">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>