Class names can't contain spaces

[mokhosh]

Describe the bug You can't add multiple classes and separate them with spaces. This is what you get:

Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('bg-gray-200 p-1') contains HTML space characters, which are not valid in tokens

So you can't style this with tailwind. Or keep the original class and add a bootstrap class to it. The strange thing is you can do this for container and containerOuter but nothing else.

To Reproduce Steps to reproduce the behavior:

new Choices(element, {
  itemSelectText: '',
  removeItemButton: true,
  classNames: {
    containerOuter: 'choices bg-gray-200 focus:bg-gray-100 focus:shadow shadow-inner appearance-none rounded w-full text-gray-700 leading-tight',
    containerInner: 'py-1 px-3',
    input: 'bg-gray-200 p-1',
  },
});

[aswinmohanme]

Can confirm.

[nicobaguio]

Can confirm as well (using tailwind).

[hsleewis]

Anyone found a workaround for this?

[abishekrsrikaanth]

anybody gave a fix for this. It looks like this issue is for only certain classes and not all of them.

I face this issue when I add multiple classes to list, itemSelectable, listDropdown

Another issue that I have is that it doesn't append to the existing styles, it just replaces the existing styles. I use the base css of the plugin and want to use my own styles, so I was hoping they will append the classes to the class= attribute. I am hoping this is fixed as well.

[BariqDharmawan]

Is this still a bug? Bcz I try to add class with space to placeholder but it return a same error as the question