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

Error editing tag with custom template

Open danieltorrer opened this issue 7 years ago • 7 comments

PLEASE MAKE SURE THAT:

  • you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
  • you provide an online demo I can see without having to replicate your environment
  • you help me by debugging your issue, and if you can't, do go on filling out this form

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

When using a custom template with [editable]="true" it requires multiple clicks to manage to edit a tag. Two clicks gets you to the edit mode but the cursor dissapears and you need to click again to activate it. You can see in the gif bellow.

example

Expected behavior

It should require only two click to enter the editable mode and start modifying

Minimal reproduction of the problem with instructions (if applicable)

<tag-input 
  [(ngModel)]="myModel" 
  [editable]="true"
  >

  <ng-template let-item="item" let-index="index">
      {{ item.display }}
  </ng-template>
</tag-input>

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

ng-cli 6.1.4

Angular version:

6.1.0

ngx-chips version:

1.9.7

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 68.0.3440

danieltorrer avatar Sep 13 '18 03:09 danieltorrer

Hi, does it only happen with custom templates?

Gbuomprisco avatar Oct 06 '18 07:10 Gbuomprisco

Angular version: 6.1.9 ngx-chips version: 1.9.8

i have the same problem.

ddanninger avatar Oct 08 '18 09:10 ddanninger

@Gbuomprisco Yes, only happens on custom templates. Even if the custom template doesn't have nested tags inside it

<ng-template let-item="item" let-index="index">
      {{ item.display }}
  </ng-template>

danieltorrer avatar Oct 22 '18 18:10 danieltorrer

@angular/[email protected] [email protected]

Same problem found when using ng-template and the attribute [editable]="true". Is there any workaround for this?

mhSangar avatar Apr 16 '19 12:04 mhSangar

Having the same problem here. Found out that hitting tab after entering edit mode when using template shifted the focus to the input, but its an ugly workaround.

johanesneumann avatar Oct 07 '19 21:10 johanesneumann

Any workaround for this issue?

rajithsam avatar Nov 30 '22 11:11 rajithsam

Issue is still there

Alexbelugin avatar Jun 05 '23 18:06 Alexbelugin