ngx-chips icon indicating copy to clipboard operation
ngx-chips copied to clipboard

onSelect only works once on a tag

Open UsamaTahir1 opened this issue 6 years ago • 1 comments
trafficstars

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

  1. Click on [Tag]
  2. Event onSelect is fired
  3. Click somewhere else on
  4. [Tag] loses focus
  5. Click on (the same) [Tag]
  6. Event onSelect is not fired

Expected behavior

Clicking on tag should always emit onSelect output

Minimal reproduction of the problem with instructions (if applicable)

It's reproducing on the demo page of ngx-chips also. First example has onSelect hooked. It works on first click on tag only.

What do you use to build your app?. Please specify the version

angular-cli

Angular version:

7.0

ngx-chips version:

2.0.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 75.0.3770.90

UsamaTahir1 avatar Jun 17 '19 20:06 UsamaTahir1

This behavior could be because of the following check in selectItem method

if (isReadonly || this.selectedTag === item) {
        return;
}

Clicking somewhere else in the document does not clear the value of this.selectedTag

I have faced a similar issue, I was using mat-dialog along with tag-input, selecting a tag would open a dialog. But when I try to select the tag once the dialog is closed, it would not trigger select and does not open the dialog. I have done a workaround for this, added the following code once the dialog is closed

tagInput.selectedTag = undefined

Now every time the dialog is closed, onselect of tag works.

So making selectedTag as undefined wherever appropriate in your case would solve the issue.

monicavalluri avatar Feb 14 '20 17:02 monicavalluri