Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dynamic tabs are duplicated if component updates items #1629

Closed
JanEggers opened this issue Feb 10, 2017 · 14 comments
Closed

dynamic tabs are duplicated if component updates items #1629

JanEggers opened this issue Feb 10, 2017 · 14 comments

Comments

@JanEggers
Copy link
Contributor

Hi im having problems creating a dynamic tabs control that is able to update.

i have a repro repository here:

https://github.com/JanEggers/Repro/

and the component is

/master/src/Repro/ClientApp/app/home/home.component.ts

the issue is every time i update the array of items the tabs are bound to the dynamic tabs are duplicated.

when i look at it with augury the tabs property of the tabsetcomponent has the wrong count.
the number of tab elements seems correct but the number of spans in the ul is too high.

@JanEggers
Copy link
Contributor Author

may be related to #1615

@avilon74
Copy link

I see the same issue. updating the list of tabs to a newly created array , generates a new list of tabs without clearing the old tabs.

Also a second issue is that if the html child component of tabs has its own tabset / tabs the parent html shows the child tabs. this should not be the case ...

@valorkin
Copy link
Member

yes, it is duplicate
and it came from fixing another issue >.<

@JanEggers
Copy link
Contributor Author

@valorkin can u please elaborate? duplicate of what, what issue was fixed will the problem be solved?

@valorkin
Copy link
Member

Yes, it will. There are similar issue because of same reason, so to not mess up I closing duplicated issues

@Flood
Copy link

Flood commented Feb 17, 2017

@valorkin : Can you please reference a similar issue so I can subscribe. I'm experiencing the same issue and blocks our AoT/Rollup implementation. The error does not exist for tabs on version 1.1.5

@cyberbobjr
Copy link

Hi, i have the same error too, i use the version 1.3.3 of ng2-bootstrap, please can you explain me the fix ?
Many thanks for your help,
Best regards

@saifaustcse
Copy link

saifaustcse commented Mar 9, 2017

After implementing AoT with Webpack I'm experiencing the same issue... I am using the version "ng2-bootstrap": "1.3.4",

@JanEggers
Copy link
Contributor Author

JanEggers commented Apr 27, 2017

@valorkin as this issue is still present in 1.6.3 i had a look at the issue myself.

i was able fix the problem by overriding TabDirective, key was a missing OnDestroy callback.

i will create a pr

@valorkin
Copy link
Member

And this will get back another issue :(
Can you update a code in a safe way,
If tabset ...
Plus update removeTab method, to be safer?

@JanEggers
Copy link
Contributor Author

i found the comments in the history so the issues are #696 and #610 which are both tied into automatic selection handling.

my thoughts on this:

a: be able to opt out of automatic selection process.

b: remove automatic selection entirely as there are other edge cases like resorteing tabs where a selected item is removed and then added again which would break selection

i tend to implement [a] because b is a little to radical and might make simpler usecases more complicated

@JanEggers
Copy link
Contributor Author

JanEggers commented Apr 28, 2017

i updated the pr

selection change during remove can now be opted out. and it is opted out by default if the tabset is destroyed or the tabs get updated by databinding. if a tab is removed using the removetab method the caller can chose wether to reselect or not

@wgrabowski
Copy link

I've encountered this error using ngx-bootstrap 1.6.6. I don't understand why this issue is closed. If it is a duplicate, please provide ID of duplicated item so we can track progress on fixing this error.

valorkin pushed a commit that referenced this issue Jun 2, 2017
fixed #1629
* fixed duplicate tab issue

* removed automatic reselection of tabs if tab is destroyed

* added tests for remove tab

* added viewvchild to be able to call method

* added detect changes call to fix unittests

* fix(tabs): remove tab-content node if tab is destroyed

* fix(tabs): fix ngIf error and change docs
@Dimanoid
Copy link

Dimanoid commented Jul 7, 2017

So in which version it was fixed? 1.7.1 and 2.0.0-beta2 still have the bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants