File tree Expand file tree Collapse file tree 1 file changed +22
-6
lines changed
packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs Expand file tree Collapse file tree 1 file changed +22
-6
lines changed Original file line number Diff line number Diff line change @@ -44,19 +44,34 @@ function TabList({
44
44
tabValues,
45
45
} : CodeTabsProps & ReturnType < typeof useTabs > ) {
46
46
const tabRefs = useRef < ( HTMLLIElement | null ) [ ] > ( [ ] ) ;
47
+ const tabsScrollContainerRef = useRef < any > ( ) ;
47
48
const { blockElementScrollPositionUntilNextRender } =
48
49
useScrollPositionBlocker ( ) ;
49
50
50
51
useEffect ( ( ) => {
51
52
const activeTab = tabRefs . current . find (
52
53
( tab ) => tab ?. getAttribute ( "aria-selected" ) === "true"
53
54
) ;
54
- if ( activeTab ) {
55
- activeTab . scrollIntoView ( {
56
- behavior : "auto" ,
57
- block : "center" ,
58
- inline : "start" ,
59
- } ) ;
55
+
56
+ if ( activeTab && tabsScrollContainerRef . current ) {
57
+ const container = tabsScrollContainerRef . current ;
58
+ const containerRect = container . getBoundingClientRect ( ) ;
59
+ const activeTabRect = activeTab . getBoundingClientRect ( ) ;
60
+
61
+ // Calculate the distance to scroll to align active tab to the left
62
+ const glowOffset = 3 ;
63
+ const scrollOffset =
64
+ activeTabRect . left -
65
+ containerRect . left +
66
+ container . scrollLeft -
67
+ glowOffset ;
68
+
69
+ // Check if the active tab is not already at the left position
70
+
71
+ if ( Math . abs ( scrollOffset - container . scrollLeft ) > 4 ) {
72
+ // Adjust the scroll of the container
73
+ container . scrollLeft = scrollOffset ;
74
+ }
60
75
}
61
76
} , [ ] ) ;
62
77
@@ -139,6 +154,7 @@ function TabList({
139
154
} ,
140
155
className
141
156
) }
157
+ ref = { tabsScrollContainerRef }
142
158
>
143
159
{ tabValues . map ( ( { value, label, attributes } ) => (
144
160
< li
You can’t perform that action at this time.
0 commit comments