Skip to content

Commit 7c86146

Browse files
authored
feat: add util function for common keyboard event handling (#715)
* feat: add util function for better keyboard event handling * chore: adjust * chore: adjust * add test case * test case * chore: adjust
1 parent 7ae36a3 commit 7c86146

File tree

2 files changed

+68
-0
lines changed

2 files changed

+68
-0
lines changed

src/KeyCode.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,6 +517,26 @@ const KeyCode = {
517517
return false;
518518
}
519519
},
520+
521+
isEditableTarget: function isEditableTarget(e: KeyboardEvent) {
522+
const target = e.target;
523+
524+
if (!(target instanceof HTMLElement)) {
525+
return false;
526+
}
527+
528+
const tagName = target.tagName;
529+
if (
530+
tagName === 'INPUT' ||
531+
tagName === 'TEXTAREA' ||
532+
tagName === 'SELECT' ||
533+
target.isContentEditable
534+
) {
535+
return true;
536+
}
537+
538+
return false;
539+
},
520540
};
521541

522542
export default KeyCode;

tests/KeyCode.test.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import KeyCode from '../src/KeyCode';
2+
import { createEvent } from '@testing-library/react';
3+
4+
describe('KeyCode.isEditableTarget', () => {
5+
it('check editable target', () => {
6+
const eleList = [
7+
{
8+
element: 'window',
9+
expected: false,
10+
},
11+
{
12+
element: 'div',
13+
expected: false,
14+
},
15+
{
16+
element: 'input',
17+
expected: true,
18+
},
19+
{
20+
element: 'textarea',
21+
expected: true,
22+
},
23+
{
24+
element: 'select',
25+
expected: true,
26+
},
27+
{
28+
element: 'div',
29+
isContentEditable: true,
30+
expected: true,
31+
},
32+
];
33+
34+
eleList.forEach(({ element, isContentEditable, expected }) => {
35+
const target =
36+
element === 'window' ? window : document.createElement(element);
37+
if (isContentEditable) {
38+
// mock isContentEditable cause JSDOM don't support it
39+
Object.defineProperty(target, 'isContentEditable', { value: true });
40+
}
41+
const event = createEvent.keyDown(target) as KeyboardEvent;
42+
target.dispatchEvent(event);
43+
const result = KeyCode.isEditableTarget(event);
44+
45+
expect(result).toBe(expected);
46+
});
47+
});
48+
});

0 commit comments

Comments
 (0)