Fix: New data-active-key not set upon initialization

#7

Author: Brendan-csel

packages/bootstrap/src/Nav.tsx

@@ -81,7 +81,6 @@ const Nav: BsPrefixRefForwardingComponent<"div", NavProps> = (p: NavProps) => {
         [`${bsPrefix}-justified`]: local.justify,
       })}
       {...props}
-      data-active-key={activeKey()}
     >
       {props.children}
     </BaseNav>

packages/bootstrap/src/Tabs.tsx

@@ -109,7 +109,7 @@ const Tabs = (p: TabsProps) => {
       mountOnEnter={local.mountOnEnter}
       unmountOnExit={local.unmountOnExit}
     >
-      <Nav {...props} role="tablist" as="ul" data-active-key={activeKey()}>
+      <Nav {...props} role="tablist" as="ul">
         <For each={tabs()}>
           {(tabProps) => (
             <RenderTab {...tabProps}>{tabProps.children}</RenderTab>

packages/core/src/Nav.tsx

@@ -142,6 +142,8 @@ const Nav = (p: NavProps) => {
     }
   };
 
+  const activeKey = () => makeEventKey(tabContext?.activeKey ?? local.activeKey)
+
   return (
     <SelectableContext.Provider value={handleSelect}>
       <NavContext.Provider
@@ -150,7 +152,7 @@ const Nav = (p: NavProps) => {
             return local.role || (tabContext ? "tablist" : undefined);
           }, // used by NavLink to determine it's role
           get activeKey() {
-            return makeEventKey(tabContext?.activeKey ?? local.activeKey);
+            return activeKey();
           },
           get getControlledId() {
             return tabContext?.getControlledId || noop;
@@ -162,10 +164,11 @@ const Nav = (p: NavProps) => {
       >
         <Dynamic
           component={local.as}
+          data-active-key={activeKey()}
           {...props}
           onKeyDown={handleKeyDown}
           ref={mergedRef}
-        >
+          >
           {props.children}
         </Dynamic>
       </NavContext.Provider>