Tab: in vertical mode with renderActiveOnly styling broken for all content except first tab · Semantic-Org/Semantic-UI-React#3412

(6 comments) (0 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import

bughelp wantedstale

説明

Bug Report

Steps

Create a tab in vertical mode with renderActive Only set to false

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', pane: 'Tab 1 Content' },
  { menuItem: 'Tab 2', pane: 'Tab 2 Content' },
  { menuItem: 'Tab 3', pane: 'Tab 3 Content' },
]

const TabExampleBasicAll = () => <Tab panes={panes} menu={{vertical: true, fluid: true}} renderActiveOnly={false} />

export default TabExampleBasicAll

Expected Result

Outer box for all content items should be the same.

Actual Result

When you navigate to any item other than the first, the top border is not shown

Version

0.84.0

Testcase

https://codesandbox.io/s/825yxr5zn0

Screenshots

コントリビューターガイド

技術スタック: javascriptreactcss
領域: frontend
Issue 種別: bug
難度: 2
推定時間: 1-3 hours
活動状況: stale
明確さ: clear
前提条件: ReactCSSSemantic UI React basics
初心者向け度: 80
調査方針: The bug is in the Tab component's styling when `renderActiveOnly={false}` and vertical menu. Inspect the CSS classes applied to the active and inactive tab panes. The top border is missing on non first panes. Check the Tab component's rendering logic in `src/modules/Tab/Tab.js` and associated CSS files. The testcase at https://codesandbox.io/s/825yxr5zn0 can be used to reproduce. Look for CSS rules that conditionally apply border top based on active state.