nativescript-community / ui-material-components

Monorepo that contains all of the NativeScript Material Design plugins.
https://nativescript-community.github.io/ui-material-components/
Apache License 2.0
216 stars 80 forks source link

[tabs] Problem with initial selection if not first tab ( >= 7.0.0) #389

Open timbell opened 2 years ago

timbell commented 2 years ago

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.

Screenshot_1655206310

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>
timbell commented 2 years ago

(NB sometimes the problem doesn't manifest itself visually, but in this case the first tab is unselectable until another tab is selected.)

farfromrefug commented 2 years ago

@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

timbell commented 2 years ago

@farfromrefug Not sure I understand - your test app doesn't use the tabs component? Did you try the test app that I posted?

farfromrefug commented 2 years ago

@timbell indeed I misplaced bottom navigation for tabs did not have time to test your app no. don't have much time those days

farfromrefug commented 2 years ago

@timbell can you try 7.0.21 and tell me if it fixes your issue?

timbell commented 2 years ago

@farfromrefug yes, that fixes it - thanks! (there's a continuous setSelectedPosition console log message now - maybe left in by mistake?)

farfromrefug commented 2 years ago

@timbell my bad will remove it