tagger icon indicating copy to clipboard operation
tagger copied to clipboard

Add new delimiter option

Open rog404 opened this issue 1 year ago • 6 comments

Motivation:

Currently, the library only allows a comma as the delimiter. This limitation restricts user flexibility in tag entry. By adding support for customs delimiters, users can customize their input experience and improve usability.

Proposed Solution:

A map of additional characters has been added to be accepted as delimiters. If none are provided, the comma (,) will be used by default. This change facilitates the addition of new characters in the future. A new option has also been created to allow users to customize their delimiter preferences.

Usage:

  tagger(document.querySelector('[name="tags"]'), {delimiter: ";"});

in React:

  const taggerOptions = {
      delimiter: ";",
    };

Links:

Close #39

Note: This is one of my first contributions to open source. Please feel free to suggest any changes or improvements.

rog404 avatar Oct 03 '24 04:10 rog404

You don't need to keep a map with keys, there is key property on the event object. The current code don't use it but you can change it.

jcubic avatar Oct 03 '24 09:10 jcubic

I made the suggested changes and updated all instances of keyCode to maintain consistency. Does that work for you?

Thanks!

rog404 avatar Oct 04 '24 00:10 rog404

I would add:

var key = event.key.toUpperCase();

to make sure that the name of the key is correct.

Also you need to update this line:

nativeInputValueSetter.call(this._input, this._tags.join(','));

and

this._tags = this._input.value.split(/\s*,\s*/).filter(Boolean);

To use delimiter.

I'm also not sure if you should even update the keydown event, the issue was about the delimiter in <input> element. I'm not sure if it's a good idea to change the key you need to press.

jcubic avatar Oct 04 '24 10:10 jcubic

I’m not quite sure I understand your message. The idea behind the delimiter is to create a tag when a specific key is pressed. Isn’t the keydown event responsible for handling key presses? I thought that’s where we would handle the new input tag.

Could you clarify your thoughts on this?

rog404 avatar Oct 04 '24 21:10 rog404

No, delimiter is not when a specific key is pressed, the issue was about input element. Delimiter is something in between, like foo,bar,baz.

jcubic avatar Oct 05 '24 07:10 jcubic

Please read the issue you're closing:

Currently the library only allows comma as delimiter. It would be great to have an option to set the delimiter (for instance semi-colon) when initializing.

key word is "initializing"

jcubic avatar Oct 05 '24 07:10 jcubic

Closing, since this implements something totally different that it should.

jcubic avatar Apr 21 '25 21:04 jcubic