Skip to content

Commit c23640b

Browse files
committed
- Improve key handling
- Port v5 script improvement
1 parent b9b63a9 commit c23640b

File tree

1 file changed

+19
-10
lines changed

1 file changed

+19
-10
lines changed

src/Core/Components/DataGrid/FluentDataGrid.razor.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,20 @@ export function init(gridElement, autoFocus) {
2626
gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
2727
}
2828
};
29+
const bodyKeyDownHandler = event => {
30+
if (event.key === "Escape") {
31+
const columnOptionsElement = gridElement?.querySelector('.col-options');
32+
if (columnOptionsElement) {
33+
gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
34+
gridElement.focus();
35+
}
36+
const columnResizeElement = gridElement?.querySelector('.col-resize');
37+
if (columnResizeElement) {
38+
gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
39+
gridElement.focus();
40+
}
41+
}
42+
};
2943
const keyboardNavigation = (sibling) => {
3044
if (sibling !== null) {
3145
start.focus();
@@ -35,24 +49,18 @@ export function init(gridElement, autoFocus) {
3549
}
3650
const keyDownHandler = event => {
3751
const columnOptionsElement = gridElement?.querySelector('.col-options');
38-
if (columnOptionsElement && columnOptionsElement.contains(event.target)) {
52+
if (columnOptionsElement) {
3953
if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
4054
event.stopPropagation();
41-
}
42-
if (event.key === "Escape") {
43-
gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
44-
gridElement.focus();
55+
return;
4556
}
4657
}
4758

4859
const columnResizeElement = gridElement?.querySelector('.col-resize');
49-
if (columnResizeElement && columnResizeElement.contains(event.target)) {
60+
if (columnResizeElement) {
5061
if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
5162
event.stopPropagation();
52-
}
53-
if (event.key === "Escape") {
54-
gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
55-
gridElement.focus();
63+
return;
5664
}
5765
}
5866

@@ -123,6 +131,7 @@ export function init(gridElement, autoFocus) {
123131

124132
document.body.addEventListener('click', bodyClickHandler, { signal });
125133
document.body.addEventListener('mousedown', bodyClickHandler, { signal }); // Otherwise it seems strange that it doesn't go away until you release the mouse button
134+
document.body.addEventListener('keydown', bodyKeyDownHandler, { signal });
126135
gridElement.addEventListener('keydown', keyDownHandler, { signal });
127136

128137
return {

0 commit comments

Comments
 (0)