in ubuntu 18.04 LTS not able to add tags using space , tab and enter

[kishan143-jaiswal]

version:6.0.0-beta.4
<ReactTags
id="ShareEmails"
autofocus={false}
tags={sharedEmail}
allowNew
suggestions={suggestions}
onDelete={this.props.handleDeletion}
onAddition={this.props.handleAddition}
delimiters={['Enter', 'Tab',' ']}
onInput={this.props.searchEmails}
/>

[i-like-robots]

Hello @kishan143-jaiswal - what browser are you using?

[kishan143-jaiswal]

Hello @kishan143-jaiswal - what browser are you using?

chrome

[i-like-robots]

And what version of Chrome are you using?

My assumption is that your browser does not support the KeyboardEvent.key property (ref1, ref2) but this was introduced in Chrome 51 which was released in 2016 🤔

[kishan143-jaiswal]

i m using two browsers, chromium Version 80.0.3987.87 and chrome Version 80.0.3987.100 ,but when i install 5.11.2 version then its working fine but when i install the latest its not creating tags using enter ,tab or spacebar

[i-like-robots]

Thanks for that extra info. I'll install an Ubuntu VM and try to recreate this myself.

If you could, I'd really appreciate it you could visit https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html then press the return, tab, and space keys and let me know the results.

[kishan143-jaiswal]

[i-like-robots]

That's really helpful, thank you

[i-like-robots]

I've not been able to recreate this @kishan143-jaiswal. I've tried with Ubuntu 18.04 and Chrome 80.0.3987.116 on a Virtualbox VM and tested on a developer edition Dell XPS machine and everything works as expected.

The keyboard event test indicates that your browser supports the KeyboardEvent.key property so I'm afraid I don't have any more ideas about what may be causing problems for you.

[BirdTho]

I'm using Linux Mint 19.3 which I am experiencing a similar problem - when the text field is selected, clicking on the suggestions, and hitting tab/enter do not autocomplete tags for me.

And also using Chrome Version 80.0.3987.122 (Official Build) (64-bit)

For those who knoweth not, Mint 19 is based on Ubuntu 18

[BirdTho]

Looks like in my case, keyDown is picking up Tab/Enter fine, however when it comes to autocompleting a highlighted tag or the top suggestion you have in this place:
function pressDelimiter ()

a line like

var match = this.state.options.findIndex(function (option) {
    return matchExact(this$1.state.query).test(option.name)
});

Now 'matchExact('b')' is looking for /^b$/i because it is a whole string match, not a partial. This is causing autocomplete by suggestions not to work!

function matchExact (string) {
  return new RegExp(("^" + (escapeForRegExp(string)) + "$"), 'i')
}

I think I'd rather have matchPartial()
But its always returning -1 so the function short circuits for me. Since it isn't an exact match, but I have allowNew={false}, and I'd like it to pick the first valid suggestion.

[BirdTho]

Also while typing out a complete tag, tab does work, but it gets elsewhere in the code and blows up:

ReactTags.prototype.addTag = function addTag (tag) {
      if (tag.disabled) {
        return
      }

      if (typeof this.props.onValidate === 'function' && !this.props.onValidate(tag)) {
        return
      }

      this.props.onAddition(tag);

      this.clearInput();
    };

See there, where it says this.props.onAddition(tag)? You have it as handleAddition in your Readme.md file. So this is confusing documentation.

[i-like-robots]

@BirdTho regarding your second comment, the handleAddition callback is used by the current (v5) and earlier versions of the component and onAddition is used by the v6 version which is in beta. The v6 documentation is here.

Unfortunately I accidentally published a v6 beta version with the latest npm tag so you may have installed this unintentionally instead of v5 as expected. This mistake has been corrected.