Add multiple classes to input

[guiiamorim]

Hi, I'm working on a project with tailwindcss and I'm trying to style the choices select to match the other inputs I have, but whenever I try to add multiple classes on the input it gives me an error as follows: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('outline-none w-full') contains HTML space characters, which are not valid in tokens.

It appears that the function element.classlist.add doesn't work with multiple classes separated by spaces, but I only experience this error in the input, on the outer and inner containers it works fine. Below is my code:

const choices = new Choices(select, { silent: false, renderChoiceLimit: -1, maxItemCount: -1, addItems: true, addItemFilter: null, removeItems: true, removeItemButton: true, editItems: false, duplicateItemsAllowed: false, delimiter: ',', paste: false, searchEnabled: true, searchChoices: true, searchFloor: 1, searchResultLimit: 4, searchFields: ['label', 'value'], position: 'auto', resetScrollPosition: true, shouldSort: true, shouldSortItems: false, renderSelectedChoices: 'auto', loadingText: 'Carregando...', noResultsText: 'Nenhuma opção encontrada', noChoicesText: 'Todas as opções selecionadas', itemSelectText: 'Selecionar', addItemText: (value) => { return Aperte Enter para adicionar "${value}"; }, maxItemText: (maxItemCount) => { return Apenas ${maxItemCount} opções podem ser selecionadas; }, valueComparer: (value1, value2) => { return value1 === value2; }, classNames: { containerInner: 'rounded-md border border-gray-700 w-full inline-block p-2', input: 'outline-none w-full' } }).setChoices(function () { let choices $.post(select.dataset.choices, function (response) { console.log(response) choices = response }, 'json') return choices || [] })

[mikebronner]

Working on the same thing as @guiiamorim

[prakash-chokalingam]

Any update on this @guiiamorim ? Facing the same issue, I can help with a PR if required.

[mtriff]

Duplicate of #832, PR is pending at #889.