@@ -28,10 +28,12 @@ export namespace BoardsDropDown {
28
28
29
29
export class BoardsDropDown extends React . Component < BoardsDropDown . Props > {
30
30
protected dropdownElement : HTMLElement ;
31
+ listRef : React . RefObject < HTMLDivElement > ;
31
32
32
33
constructor ( props : BoardsDropDown . Props ) {
33
34
super ( props ) ;
34
35
36
+ this . listRef = React . createRef ( ) ;
35
37
let list = document . getElementById ( 'boards-dropdown-container' ) ;
36
38
if ( ! list ) {
37
39
list = document . createElement ( 'div' ) ;
@@ -41,6 +43,14 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
41
43
}
42
44
}
43
45
46
+ override componentDidUpdate ( prevProps : BoardsDropDown . Props ) : void {
47
+ if ( prevProps . coords === 'hidden' && this . listRef . current ) {
48
+ this . listRef . current . focus ( ) ;
49
+ }
50
+ }
51
+
52
+ override componentDidMount ( ) : void { }
53
+
44
54
override render ( ) : React . ReactNode {
45
55
return ReactDOM . createPortal ( this . renderNode ( ) , this . dropdownElement ) ;
46
56
}
@@ -61,17 +71,22 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
61
71
position : 'absolute' ,
62
72
...coords ,
63
73
} }
74
+ ref = { this . listRef }
75
+ tabIndex = { 0 }
64
76
>
65
- { items
66
- . map ( ( { name, port, selected, onClick } ) => ( {
67
- boardLabel : name ,
68
- port,
69
- selected,
70
- onClick,
71
- } ) )
72
- . map ( this . renderItem ) }
77
+ < div className = "arduino-boards-dropdown-list--items-container" >
78
+ { items
79
+ . map ( ( { name, port, selected, onClick } ) => ( {
80
+ boardLabel : name ,
81
+ port,
82
+ selected,
83
+ onClick,
84
+ } ) )
85
+ . map ( this . renderItem ) }
86
+ </ div >
73
87
< div
74
88
key = { footerLabel }
89
+ tabIndex = { 0 }
75
90
className = "arduino-boards-dropdown-item arduino-board-dropdown-footer"
76
91
onClick = { ( ) => this . props . openBoardsConfig ( ) }
77
92
>
@@ -93,6 +108,11 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
93
108
onClick : ( ) => void ;
94
109
} ) : React . ReactNode {
95
110
const protocolIcon = iconNameFromProtocol ( port . protocol ) ;
111
+ const onKeyUp = ( e : React . KeyboardEvent ) => {
112
+ if ( e . key === 'Enter' ) {
113
+ onClick ( ) ;
114
+ }
115
+ } ;
96
116
97
117
return (
98
118
< div
@@ -101,6 +121,8 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
101
121
'arduino-boards-dropdown-item--selected' : selected ,
102
122
} ) }
103
123
onClick = { onClick }
124
+ onKeyUp = { onKeyUp }
125
+ tabIndex = { 0 }
104
126
>
105
127
< div
106
128
className = { classNames (
@@ -235,6 +257,7 @@ export class BoardsToolBarItem extends React.Component<
235
257
selectedPort : board . port ,
236
258
} ;
237
259
}
260
+ this . setState ( { coords : 'hidden' } ) ;
238
261
} ,
239
262
} ) ) }
240
263
openBoardsConfig = { this . openDialog }
@@ -245,7 +268,6 @@ export class BoardsToolBarItem extends React.Component<
245
268
246
269
protected openDialog = ( ) => {
247
270
this . props . commands . executeCommand ( ArduinoCommands . OPEN_BOARDS_DIALOG . id ) ;
248
- this . setState ( { coords : 'hidden' } ) ;
249
271
} ;
250
272
}
251
273
export namespace BoardsToolBarItem {
0 commit comments