ui-material-components
ui-material-components copied to clipboard
[tabs] Problem with initial selection if not first tab ( >= 7.0.0)
Using Nativescript 8.2.3, Android emulator (Pixel 5 API 30)
When the initial tab is not the first, then the incorrect (first) tab is selected though the tab content is selected correctly. This was working fine up to version 6.2.24.
To reproduce, create an Angular, "hello world" test project and modify items.component.ts
+ items.component.html
as follows... Example project attached: uitabs7-0.zip
Add to ``items.component.ts`:
private _currentTab = 1; // Set initial tab to the second one
get currentTab(): number {
return this._currentTab;
}
tabChanged(tab: number) {
this._currentTab = tab;
}
Change <GridLayout>
in items.component.html
to be:
<GridLayout>
<MDTabs [selectedIndex]="currentTab" (selectedIndexChanged)="tabChanged($event.newIndex)">
<MDTabStrip>
<MDTabStripItem>
<Label text="One"></Label>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Two"></Label>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Three"></Label>
</MDTabStripItem>
</MDTabStrip>
<MDTabContentItem>
<StackLayout verticalAlignment="center" horizontalAlignment="center">
<Label text="1" fontSize="60"></Label>
</StackLayout>
</MDTabContentItem>
<MDTabContentItem>
<StackLayout verticalAlignment="center" horizontalAlignment="center">
<Label text="2" fontSize="60"></Label>
</StackLayout>
</MDTabContentItem>
<MDTabContentItem>
<StackLayout verticalAlignment="center" horizontalAlignment="center">
<Label text="3" fontSize="60"></Label>
</StackLayout>
</MDTabContentItem>
</MDTabs>
</GridLayout>
(NB sometimes the problem doesn't manifest itself visually, but in this case the first tab is unselectable until another tab is selected.)
@timbell i tried here with a basic example like this one https://github.com/NativeScript/NativeScript/files/8910031/android_frame_crash_demo.zip and it works just fine. You need to investigate this a bit more to see what makes it not work in your case
@farfromrefug Not sure I understand - your test app doesn't use the tabs component? Did you try the test app that I posted?
@timbell indeed I misplaced bottom navigation for tabs did not have time to test your app no. don't have much time those days
@timbell can you try 7.0.21 and tell me if it fixes your issue?
@farfromrefug yes, that fixes it - thanks!
(there's a continuous setSelectedPosition
console log message now - maybe left in by mistake?)
@timbell my bad will remove it