Browser Refreshes when adding a Tag.

[vgogov]

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

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

Current behavior

When adding a tag, it's adds a tag but then immediately refresher the browser page. I've preserved the console logs and here is the output:

errors.ts:42 ERROR TypeError: this._onTouchedCallback is not a function
at TagInputComponent.TagInputAccessor.onTouched (accessor.ts:46)
at TagInputComponent.blur (tag-input.ts:616)
at Object.eval [as handleEvent] (TagInputComponent.ngfactory.js:490)
at Object.handleEvent (view.ts:141)
at Object.handleEvent (services.ts:76)
at dispatchEvent (util.ts:173)
at eval (provider.ts:192)
at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:119)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:252)
at SafeSubscriber.next (Subscriber.ts:204)
at Subscriber._next (Subscriber.ts:135)
at Subscriber.next (Subscriber.ts:95)
at EventEmitter.Subject.next (Subject.ts:61)
at EventEmitter.emit (event_emitter.ts:78)
at Object.eval [as handleEvent] (TagInputForm.ngfactory.js:290)
defaultErrorLogger @ errors.ts:42
ErrorHandler.handleError @ error_handler.ts:69
next @ application_ref.ts:366
schedulerFn @ event_emitter.ts:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:252
SafeSubscriber.next @ Subscriber.ts:204
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ event_emitter.ts:78
NgZone.triggerError @ ng_zone.ts:87
onHandleError @ ng_zone.ts:283
ZoneDelegate.handleError @ zone.js:369
Zone.runTask @ zone.js:168
ZoneTask.invoke @ zone.js:460
errors.ts:42 ERROR TypeError: this._onChangeCallback is not a function
at TagInputComponent.set [as items] (accessor.ts:42)
at TagInputComponent.appendNewTag (tag-input.ts:489)
at TagInputComponent.addItem (tag-input.ts:424)
at Object.eval [as handleEvent] (TagInputComponent.ngfactory.js:486)
at Object.handleEvent (view.ts:141)
at Object.handleEvent (services.ts:76)
at dispatchEvent (util.ts:173)
at eval (provider.ts:192)
at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:119)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:252)
at SafeSubscriber.next (Subscriber.ts:204)
at Subscriber._next (Subscriber.ts:135)
at Subscriber.next (Subscriber.ts:95)
at EventEmitter.Subject.next (Subject.ts:61)
at EventEmitter.emit (event_emitter.ts:78)
defaultErrorLogger @ errors.ts:42
ErrorHandler.handleError @ error_handler.ts:69
next @ application_ref.ts:366
schedulerFn @ event_emitter.ts:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:252
SafeSubscriber.next @ Subscriber.ts:204
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ event_emitter.ts:78
NgZone.triggerError @ ng_zone.ts:87
onHandleError @ ng_zone.ts:283
ZoneDelegate.handleError @ zone.js:369
Zone.runTask @ zone.js:168
ZoneTask.invoke @ zone.js:460
Navigated to http://localhost:3000/? <------ Refreshes Here after adding tag
errors.ts:42 ERROR TypeError: this._onChangeCallback is not a function
at TagInputComponent.set [as items] (accessor.ts:42)
at TagInputComponent.appendNewTag (tag-input.ts:489)
at TagInputComponent.addItem (tag-input.ts:424)
at Object.eval [as handleEvent] (TagInputComponent.ngfactory.js:486)
at Object.handleEvent (view.ts:141)
at Object.handleEvent (services.ts:76)
at dispatchEvent (util.ts:173)
at eval (provider.ts:192)
at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:119)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:252)
at SafeSubscriber.next (Subscriber.ts:204)
at Subscriber._next (Subscriber.ts:135)
at Subscriber.next (Subscriber.ts:95)
at EventEmitter.Subject.next (Subject.ts:61)
at EventEmitter.emit (event_emitter.ts:78)
defaultErrorLogger @ errors.ts:42
ErrorHandler.handleError @ error_handler.ts:69
next @ application_ref.ts:366
schedulerFn @ event_emitter.ts:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:252
SafeSubscriber.next @ Subscriber.ts:204
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ event_emitter.ts:78
NgZone.triggerError @ ng_zone.ts:87
onHandleError @ ng_zone.ts:283
ZoneDelegate.handleError @ zone.js:369
Zone.runTask @ zone.js:168
ZoneTask.invoke @ zone.js:460
Navigated to http://localhost:3000/? <------ Refreshes Here after adding tag

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version

OSX 10.11.5, Visual Studio 1.11.2, NodeJS 7.8.0, NPM 4.5.0, "concurrently": "~3.0.0", "lite-server": "~2.2.2", BrowserSync 2.18.8, "systemjs": "~0.20.12".

Angular version:

4.0.2

ng2-tag-input version:

1.0.5

Browser:

Chrome Version 57.0.2987.133 (64-bit)

[Gbuomprisco]

Have you added an ngModel?

[vgogov]

Which ngModel? I have the TagInputModule in my app.module.

[Gbuomprisco]

Can you paste here the html of you component in which you put tag-input?

[vgogov]

Hmm, I restarted my machine and it seems to work now 😕 . There is another problem now. I am using ng2-bs3-modal to pop up modals. When I insert the tag inside the modal code the tag drop down drops behind it:

I've tried styling the to include different positions, z-index's etc..but not luck. Here is the the html code of the modal with the tag module embedded:

<modal #tagModal [cssClass]="'my-modal'">
    <modal-header [show-close]="true">
        <h4 style="text-align: center" class="modal-title">Add/Modify Tags</h4>
    </modal-header>
    <modal-body>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default" style="height:350px;width:400px;">
                    <div class="panel-heading">Selected Content:</div>
                    <div class="panel-body">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default" style="height:350px;width:800px;">
                    <div class="panel-heading">Tags:</div>
                    <div class="panel-body">
                        <tag-input [(ngModel)]="items" [onlyFromAutocomplete]="true" [modelAsStrings]="true">
                            <tag-input-dropdown [autocompleteItems]="autocompleteItems" [focusFirstElement]="true">
                            </tag-input-dropdown>
                        </tag-input>
                    </div>
                </div>
            </div>
        </div>
    </modal-body>
    <modal-footer [show-default-buttons]="true">
        <tag-input [(ngModel)]="items" [onlyFromAutocomplete]="true" [modelAsStrings]="true">
            <tag-input-dropdown [autocompleteItems]="autocompleteItems" [focusFirstElement]="true">
            </tag-input-dropdown>
        </tag-input>
    </modal-footer>
</modal>

I put two of the tag-input components so I could show that the drop-down hides behind the modal in the lower left corner. Any thoughts on what might be causing this?

Thanks!

[Gbuomprisco]

Try out [appendToBody]=false, check out the doc

[irowbin]

Hi, @Gbuomprisco I am using ngx-chips on the bootstrap modal but the drop-down hides behind the modal.

<tag-input formControlName="names" 
           [onlyFromAutocomplete]="true"
           [showDropdownIfEmpty]="true"
           [appendToBody]="false"> <!-- not working even if i add this here as mentioned in docs -->
          <tag-input-dropdown [autocompleteObservable]="requestUsers"></tag-input-dropdown>
</tag-input>

But if i modify css class like this, it works:

.ng2-dropdown-menu {
    z-index: 200000 !important;
}

Is there someting that i am missing here?

My bs-modal z-index is 10050. Is this the problem that drop-down hides behind it?

Thank you.

[Gbuomprisco]

appendToBody goes on the drop down

[irowbin]

@Gbuomprisco using appendToBody does not help me with this until I added css manually;
Also, the input doesn't stretch with the parent div and when I add tags, it floated to outside of the input;

What can be the reason?

<div class="col-md-4">
       <div class="form-group">
          <tag-input formControlName="names" 
                   [onlyFromAutocomplete]="true"
                   [showDropdownIfEmpty]="true"
                   [appendToBody]="false"> <!-- not working even if i add this here as mentioned in docs -->
                   <tag-input-dropdown [autocompleteObservable]="requestUsers"></tag-input-dropdown>
         </tag-input>
       </div>
</div>

Take a look:

Demos in pnlkr could be very helpful in this case. Can you please add live demos to your docs?

Thanks

[gopalkumar315]

HI
I am using angular 4 and using your component. I need this layout and want to add class on every selected item base on condition. Do you have any solution for this.

[agiratech-vigneshm]

@gopalkumar315 I believe you can add your own template for tags and do the styling and condition. Have you checked the docs?

[Annleena333]

I have also browser refresh issues even if I add
<div class="col-md-4"> <div class="form-group"> <tag-input formControlName="names" [onlyFromAutocomplete]="true" [showDropdownIfEmpty]="true"> <tag-input-dropdown [autocompleteObservable]="requestUsers" [appendToBody]="false"> </tag-input-dropdown> </tag-input> </div>