ui-material-components icon indicating copy to clipboard operation
ui-material-components copied to clipboard

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

Open timbell opened this issue 2 years ago • 7 comments

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 avatar Jun 14 '22 12:06 timbell

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

timbell avatar Jun 14 '22 12:06 timbell

@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 avatar Jun 16 '22 14:06 farfromrefug

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

timbell avatar Jun 16 '22 16:06 timbell

@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 avatar Jun 16 '22 18:06 farfromrefug

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

farfromrefug avatar Jun 21 '22 08:06 farfromrefug

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

timbell avatar Jun 21 '22 08:06 timbell

@timbell my bad will remove it

farfromrefug avatar Jun 21 '22 12:06 farfromrefug