[Bug]: `fluent-tablist` inside a `fluent-dialog-body` seems to ignore this `activeid` attribute

[dvoituron]

Component

Tablist

Package version

3.0.0-rc.20

@microsoft/fast-element version

2.9.1

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 35.15 GB / 63.95 GB
  Browsers:
    Edge: Chromium (148.0.3967.83), ChromiumDev (150.0.4041.0)
    Firefox: 151.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @fluentui/tokens: ^1.0.0-alpha.23 => 1.0.0-alpha.23
    @fluentui/web-components: ^3.0.0-rc.20 => 3.0.0-rc.20
    @microsoft/fast-element: ^2.9.1 => 2.9.1

Current Behavior

When a fluent-tablist component is placed on a web page, the activeid attribute is handled correctly: the specified tab is displayed (although the change event is triggered twice).

However, the SAME CODE placed inside a fluent-dialog-body seems to ignore this activeid attribute

Expected Behavior

The behavior should be the same, displaying the tab specified by activeid when tabs are included in fluent-dialog-body

Reproduction

https://stackblitz.com/edit/typescript-5jkqk7p6?file=index.html

Steps to reproduce

1. Go to or copy this code
2. Click on the Open dialog button
3. The tab-3 is not active.

 <!-- Tabs -->
  <fluent-tablist activeid="tab-C">
    <fluent-tab id="tab-A">
      First Tab
    </fluent-tab>
    <fluent-tab id="tab-B">
      Second Tab
    </fluent-tab>
    <fluent-tab id="tab-C">
      Third Tab
    </fluent-tab>
    <fluent-tab id="tab-D">
      Fourth Tab
    </fluent-tab>
  </fluent-tablist>


  <!-- Dialog -->
  <div>
    <fluent-button id="myDialogButton"
                   onclick="ShowDialog()">Open Dialog</fluent-button>
    <fluent-dialog id="myDialog"
                   type="modal">
      <fluent-dialog-body>
        <div slot="title">Default Dialog</div>
        <p>Press ESC to close the dialog.</p>

        <!-- Tabs -->
        <fluent-tablist activeid="tab-3">
          <fluent-tab id="tab-1">
            First Tab
          </fluent-tab>
          <fluent-tab id="tab-2">
            Second Tab
          </fluent-tab>
          <fluent-tab id="tab-3">
            Third Tab
          </fluent-tab>
          <fluent-tab id="tab-4">
            Fourth Tab
          </fluent-tab>
        </fluent-tablist>
      </fluent-dialog-body>
    </fluent-dialog>
  </div>

  <script>
    
    document.querySelectorAll('fluent-tablist').forEach((tablist) => {
      tablist.addEventListener('change', (event) => {
        console.log('fluent-tablist change to ', event.detail?.id);
      });
    });
    
    const myDialog = document.getElementById('myDialog');

    function ShowDialog() {
      myDialog.show();
    }
  </script>

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

microsoft/fluentui-blazor#4887

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.