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

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

Open
timbell opened this issue Jun 14, 2022 · 7 comments
Open

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

timbell opened this issue Jun 14, 2022 · 7 comments

Comments

@timbell
Copy link

timbell commented Jun 14, 2022

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
Copy link
Author

timbell commented Jun 14, 2022

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

@farfromrefug
Copy link
Member

@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
Copy link
Author

timbell commented Jun 16, 2022

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

@farfromrefug
Copy link
Member

@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
Copy link
Member

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

@timbell
Copy link
Author

timbell commented Jun 21, 2022

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

@farfromrefug
Copy link
Member

@timbell my bad will remove it

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

2 participants