@@ -35,6 +35,17 @@ export const NodesTreeTitle = ({
35
35
preparedVersions,
36
36
onClick,
37
37
} : NodesTreeTitleProps ) => {
38
+ const handleClick = React . useCallback < React . MouseEventHandler < HTMLDivElement > > (
39
+ ( event ) => {
40
+ const shouldSkip = event . nativeEvent . composedPath ( ) . some ( isActiveButtonTarget ) ;
41
+
42
+ if ( ! shouldSkip ) {
43
+ onClick ?.( ) ;
44
+ }
45
+ } ,
46
+ [ onClick ] ,
47
+ ) ;
48
+
38
49
const nodesAmount = React . useMemo ( ( ) => {
39
50
if ( items ) {
40
51
return items . reduce ( ( acc , curr ) => {
@@ -49,7 +60,7 @@ export const NodesTreeTitle = ({
49
60
} , [ items , nodes ] ) ;
50
61
51
62
return (
52
- < div className = { b ( 'overview' ) } onClick = { onClick } >
63
+ < div className = { b ( 'overview' ) } onClick = { handleClick } >
53
64
< Flex gap = { 2 } alignItems = { 'center' } >
54
65
{ versionColor && ! isDatabase ? (
55
66
< div className = { b ( 'version-color' ) } style = { { background : versionColor } } />
@@ -63,10 +74,6 @@ export const NodesTreeTitle = ({
63
74
size = "s"
64
75
className = { b ( 'clipboard-button' ) }
65
76
view = "flat"
66
- onClickCapture = { ( e ) => {
67
- e . preventDefault ( ) ;
68
- e . stopPropagation ( ) ;
69
- } }
70
77
/>
71
78
</ React . Fragment >
72
79
) : null }
@@ -85,3 +92,13 @@ export const NodesTreeTitle = ({
85
92
</ div >
86
93
) ;
87
94
} ;
95
+
96
+ function isActiveButtonTarget ( target : EventTarget ) {
97
+ return (
98
+ target instanceof HTMLElement &&
99
+ ( ( target . nodeName === 'BUTTON' &&
100
+ ! target . hasAttribute ( 'disabled' ) &&
101
+ target . getAttribute ( 'aria-disabled' ) !== 'true' ) ||
102
+ ( target . hasAttribute ( 'tabindex' ) && target . tabIndex > - 1 ) )
103
+ ) ;
104
+ }
0 commit comments