Infinite loading bar under input text

[giuliovivian]

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

In the online demo (https://angular-mfppay.stackblitz.io/), in the example titled "Tags accepting only items from an autocomplete using a remote endpoint", when you type something and in the meanwhile there are another PENDING api call, the blue progress bar under the input text have a strange behaviour (spinning infinitly)

Expected behavior

The progress bar stop and restart after the new debouncetime

Minimal reproduction of the problem with instructions (if applicable)

look at your demo

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

look at your demo

Angular version:

look at your demo

ngx-chips version:

look at your demo

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 78 progressbug.zip

[HDaghash]

Having same issue with autocompleteObservable even all my observable are resolved , any chance to solve this ?

[HDaghash]

Hey i work around that issue and i'm setting the loader manually now on and off like the fallowing :

based on this code

https://github.com/Gbuomprisco/ngx-chips/blob/master/modules/components/tag-input/tag-input.ts#L410

on input element define view child element #Input

then turn loading off

Input.isProgressBarVisible.next('VALID');
input.isLoading = false

turn loader on :

Input.isProgressBarVisible.next('PENDING');
input.isLoading = true

hope this is will be helpful for someone till the bug getting fixed.

[pgarzina]

Experiencing the same issue, altho only when using the tag-input inside a bootstrap modal (ngx-bootstrap), so might be due to bootstraps css. tried @HDaghash workaround which works, but decided to just hide it with css

[yudarik]

Having the same issue when using the tag-input inside bootstrap modal. I've noticed that it happens since the 'autocompleteObservable' event is fired twice, once when user inputs the tag string, and another time once he picks the desired tag from results drop-down. Sounds like a bug, that I'm struggling to point where it comes from.

[yudarik]

Update: looks like it only happens when "showDropdownIfEmpty" is set to "true"

<tag-input-dropdown
  [autocompleteObservable]="getChannelsByTagInput"
  [showDropdownIfEmpty]="true"
  [keepOpen]="false"
  [appendToBody]="true"
  [zIndex]="1099"
  [minimumTextLength]="4"
  [identifyBy]="'id'"
  [displayBy]="'name'">
</tag-input-dropdown>

Tested in few places in my app, and looks like [showDropdownIfEmpty]="false" resolves the issue, at least for me.

[giuliovivian]

Experiencing the same issue, altho only when using the tag-input inside a bootstrap modal (ngx-bootstrap), so might be due to bootstraps css. tried @HDaghash workaround which works, but decided to just hide it with css

Ehy pgarzina, thx for reply. Can you kindly tell me which kind of edits have you done please?

[giuliovivian]

Update: looks like it only happens when "showDropdownIfEmpty" is set to "true"

<tag-input-dropdown
  [autocompleteObservable]="getChannelsByTagInput"
  [showDropdownIfEmpty]="true"
  [keepOpen]="false"
  [appendToBody]="true"
  [zIndex]="1099"
  [minimumTextLength]="4"
  [identifyBy]="'id'"
  [displayBy]="'name'">
</tag-input-dropdown>

Tested in few places in my app, and looks like [showDropdownIfEmpty]="false" resolves the issue, at least for me.

Not working for me.

[giuliovivian]

I noted others issues on css. I have these tags: [111, 1112, 1113, 1114, 1115] The dropdown don't have enought space on bottom to show all of them => https://ibb.co/rpkvmGL If I digit "2" immediatly after first search, (so search input "111" become "1112"), the result appear in a strange position on top => https://ibb.co/wQPCT1Q

[rahulchandranm]

The progress bar issue resolved for me by adding below css if you don't want to show the progress bar at all:

.progress-bar { display: none !important; }