Skip to content

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

@kishan143-jaiswal

Description

@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}
/>

Activity

changed the title [-]in windows not able to add tags using space , tab and enter[/-] [+]in ubuntu 18.04 LTS not able to add tags using space , tab and enter[/+] on Feb 17, 2020
i-like-robots

i-like-robots commented on Feb 17, 2020

@i-like-robots
Owner

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

kishan143-jaiswal

kishan143-jaiswal commented on Feb 18, 2020

@kishan143-jaiswal
Author

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

chrome

i-like-robots

i-like-robots commented on Feb 18, 2020

@i-like-robots
Owner

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

kishan143-jaiswal commented on Feb 20, 2020

@kishan143-jaiswal
Author

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

i-like-robots commented on Feb 20, 2020

@i-like-robots
Owner

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

kishan143-jaiswal commented on Feb 20, 2020

@kishan143-jaiswal
Author

Screenshot from 2020-02-20 18-43-12

i-like-robots

i-like-robots commented on Feb 20, 2020

@i-like-robots
Owner

That's really helpful, thank you

i-like-robots

i-like-robots commented on Feb 24, 2020

@i-like-robots
Owner

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

BirdTho commented on Mar 4, 2020

@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

BirdTho commented on Mar 4, 2020

@BirdTho

Matching letters

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

BirdTho commented on Mar 4, 2020

@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

i-like-robots commented on Mar 4, 2020

@i-like-robots
Owner

@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.

AstroProjection

AstroProjection commented on Jun 25, 2021

@AstroProjection

Hey, I'm facing the same issue when I'm trying to use the default comma, enter to create new tags.
I'm using Ubuntu v18.04 on a Dell Latitude 3410..

Edit:
I looked into the code of the package that I downloaded of react-tag-autocomplete from npm and in that the bundle appears to be comparing KeyCode to string values. it seems outdated from the package in this repo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @i-like-robots@BirdTho@AstroProjection@kishan143-jaiswal

        Issue actions

          in ubuntu 18.04 LTS not able to add tags using space , tab and enter · Issue #196 · i-like-robots/react-tags