Added activateFirstVisibleTab() method to Tab widget

close #187

CHANGELOG.md

@@ -6,6 +6,7 @@ Yii Framework 2 bootstrap extension Change Log
 
 - Enh #131 Added `tabContentOptions` to set HTML attributes for 'tab-content' container in `Tabs` widget (AndrewKorpusov)
 - Enh #145: Added the ability to customize the class used to draw dropdowns in `yii\bootstrap\Nav`, `yii\bootstrapButtonDropdown` and `yii\bootstrap\Tab` widgets (PowerGamer1)
+- Enh #187: Added `yii\bootstrap\Tabs::activateFirstVisibleTab()` to set the first visible tab as active if no active tab is set (nilsburg)
 - Bug #126: `yii\bootstrap\ToggleButtonGroup` was unable to work without model (makroxyz)
 - Bug #130: Fixed `yii\bootstrap\Collapse` to use pure numerical value on `content` property (meysampg)
 - Bug #137: Remove `role="navbar"` from `yii\bootstrap\NavBar` according to new aria specification (tino415)

Tabs.php

@@ -160,8 +160,8 @@ class Tabs extends Widget
         $headers = [];
         $panes = [];
 
-        if (!$this->hasActiveTab() && !empty($this->items)) {
-            $this->items[0]['active'] = true;
+        if (!$this->hasActiveTab()) {
+            $this->activateFirstVisibleTab();
         }
 
         foreach ($this->items as $n => $item) {
@@ -238,6 +238,25 @@ class Tabs extends Widget
     }
 
     /**
+     * Sets the first visible tab as active.
+     *
+     * This method activates the first tab that is visible and
+     * not explicitly set to inactive (`'active' => false`).
+     * @since 2.0.7
+     */
+    protected function activateFirstVisibleTab()
+    {
+        foreach ($this->items as $i => $item) {
+            $active = ArrayHelper::getValue($item, 'active', null);
+            $visible = ArrayHelper::getValue($item, 'visible', true);
+            if ($visible && $active !== false) {
+                $this->items[$i]['active'] = true;
+                return;
+            }
+        }
+    }
+
+    /**
      * Normalizes dropdown item options by removing tab specific keys `content` and `contentOptions`, and also
      * configure `panes` accordingly.
      * @param string $itemNumber number of the item

tests/TabsTest.php

@@ -147,7 +147,7 @@ class TabsTest extends TestCase
         $out = Tabs::widget([
             'items' => [
                 [
-                    'label' => 'Page1', 'content'=>'Page1'
+                    'label' => 'Page1', 'content' => 'Page1'
                 ]
             ],
             'tabContentOptions' => [
@@ -155,7 +155,63 @@ class TabsTest extends TestCase
             ]
         ]);
 
-        $this->assertContains($checkAttribute.'=', $out);
+        $this->assertContains($checkAttribute . '=', $out);
         $this->assertContains($checkValue, $out);
     }
+
+    public function testActivateFirstVisibleTab()
+    {
+        $html = Tabs::widget([
+            'id'=>'mytab',
+            'items' => [
+                [
+                    'label' => 'Tab 1',
+                    'content' => 'some content',
+                    'visible' => false
+                ],
+                [
+                    'label' => 'Tab 2',
+                    'content' => 'some content'                            
+                ],
+                [
+                    'label' => 'Tab 3',
+                    'content' => 'some content'
+                ],
+                [
+                    'label' => 'Tab 4',
+                    'content' => 'some content'
+                ]
+            ]
+        ]);        
+        $this->assertNotContains('<li class="active"><a href="#mytab-tab0" data-toggle="tab">Tab 1</a></li>', $html);
+        $this->assertContains('<li class="active"><a href="#mytab-tab1" data-toggle="tab">Tab 2</a></li>', $html);
+    }
+
+    public function testActivateTab()
+    {
+        $html = Tabs::widget([
+            'id'=>'mytab',
+            'items' => [
+                [
+                    'label' => 'Tab 1',
+                    'content' => 'some content',
+                    'visible'=>false
+                ],
+                [
+                    'label' => 'Tab 2',
+                    'content' => 'some content'                            
+                ],
+                [
+                    'label' => 'Tab 3',
+                    'content' => 'some content',
+                    'active' => true
+                ],
+                [
+                    'label' => 'Tab 4',
+                    'content' => 'some content'
+                ]
+            ]
+        ]);        
+        $this->assertContains('<li class="active"><a href="#mytab-tab2" data-toggle="tab">Tab 3</a></li>', $html);
+    }
 }