Space character as delimiter causes problems in 4.12.0

[BryanPierce]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/gewofobuze/1/edit?html,js,output

Explanation

Set delimiters: ' '

• What is the expected behavior? After typing characters and pressing the space bar, the typed characters should be displayed as a tag.
• What is happening instead? Nothing happens immediately after pressing space bar. If another character is typed after the space, the characters before the space are grouped as a tag and the character after the space immediately becomes a tag.

[Tasoril]

This appears to be happening because of the trim that happens on the string before delimiters are processed, so it's not even matching against the space before it's removed from the string to be processed. Once a character exists after the space, it no longer trims it, so it then matches.

As a workaround, you can pass 'trim: false' in your settings as well and it will properly match the space character again.

Demo of workaround

[yairEO]

I will leave this as an open issue because it's up to the developer to know the trim setting should be set to false if the delimiters is set to " " (space). I prefer not to do it automatically within Tagify, because I want the developer to be fully aware of this whole thing.

[indigogiant]

Just noting that the example here https://yaireo.github.io/tagify/#section-advance-options sets space as a delimiter but doesn't set trim to false and exhibits the same issue described above.

[yairEO]

Actually I will close this. Anyone can just find this issue by searching keywords in this repo

[lqminh268]

When I use a string template to provide the className prop, I encounter the error message The token provided contains HTML space characters too.

[yairEO]

@lqminh268 - show me how you use it

[dylantf]

In case anyone else comes across this issue with spaces in the className because they're trying to change the classes on the input field, they need to go inside settings, e.g.

<Tags
  settings={{
    classNames: {
      input: "input input-bordered w-full",
    },
  }}
/>

The properties are available here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/yaireo__tagify/index.d.ts#L266