fix(frontend): read KeyboardEvent.key instead of which/code (#10083)
This commit is contained in:
		
							parent
							
								
									830fabef12
								
							
						
					
					
						commit
						6d82371449
					
				
					 4 changed files with 23 additions and 25 deletions
				
			
		| 
						 | 
				
			
			@ -112,7 +112,7 @@ describe('After user signup', () => {
 | 
			
		|||
	});
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
describe('After user singed in', () => {
 | 
			
		||||
describe('After user signed in', () => {
 | 
			
		||||
	beforeEach(() => {
 | 
			
		||||
		cy.resetState();
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -141,6 +141,19 @@ describe('After user singed in', () => {
 | 
			
		|||
		cy.get('[data-cy-open-post-form-submit]').click();
 | 
			
		||||
 | 
			
		||||
		cy.contains('Hello, Misskey!');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
	it('open note form with hotkey', () => {
 | 
			
		||||
		// Wait until the page loads
 | 
			
		||||
		cy.get('[data-cy-open-post-form]').should('be.visible');
 | 
			
		||||
		// Use trigger() to give different `code` to test if hotkeys also work on non-QWERTY keyboards.
 | 
			
		||||
		cy.document().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "n", code: "KeyL" });
 | 
			
		||||
		// See if the form is opened
 | 
			
		||||
		cy.get('[data-cy-post-form-text]').should('be.visible');
 | 
			
		||||
		// Close it
 | 
			
		||||
		cy.focused().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "Escape", code: "Escape" });
 | 
			
		||||
		// See if the form is closed
 | 
			
		||||
		cy.get('[data-cy-post-form-text]').should('not.be.visible');
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -437,8 +437,8 @@ function clear() {
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
function onKeydown(ev: KeyboardEvent) {
 | 
			
		||||
	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
 | 
			
		||||
	if (ev.which === 27) emit('esc');
 | 
			
		||||
	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
 | 
			
		||||
	if (ev.key === 'Escape') emit('esc');
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function onCompositionUpdate(ev: CompositionEvent) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -53,10 +53,10 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 | 
			
		|||
	return result;
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const ignoreElemens = ['input', 'textarea'];
 | 
			
		||||
const ignoreElements = ['input', 'textarea'];
 | 
			
		||||
 | 
			
		||||
function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
 | 
			
		||||
	const key = ev.code.toLowerCase();
 | 
			
		||||
	const key = ev.key.toLowerCase();
 | 
			
		||||
	return patterns.some(pattern => pattern.which.includes(key) &&
 | 
			
		||||
		pattern.ctrl === ev.ctrlKey &&
 | 
			
		||||
		pattern.shift === ev.shiftKey &&
 | 
			
		||||
| 
						 | 
				
			
			@ -70,7 +70,7 @@ export const makeHotkey = (keymap: Keymap) => {
 | 
			
		|||
 | 
			
		||||
	return (ev: KeyboardEvent) => {
 | 
			
		||||
		if (document.activeElement) {
 | 
			
		||||
			if (ignoreElemens.some(el => document.activeElement!.matches(el))) return;
 | 
			
		||||
			if (ignoreElements.some(el => document.activeElement!.matches(el))) return;
 | 
			
		||||
			if (document.activeElement.attributes['contenteditable']) return;
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,18 +16,3 @@ export const aliases = {
 | 
			
		|||
	'right': 'ArrowRight',
 | 
			
		||||
	'plus': ['NumpadAdd', 'Semicolon'],
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
/*!
 | 
			
		||||
* Programmatically add the following
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
// lower case chars
 | 
			
		||||
for (let i = 97; i < 123; i++) {
 | 
			
		||||
	const char = String.fromCharCode(i);
 | 
			
		||||
	aliases[char] = `Key${char.toUpperCase()}`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// numbers
 | 
			
		||||
for (let i = 0; i < 10; i++) {
 | 
			
		||||
	aliases[i] = [`Numpad${i}`, `Digit${i}`];
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue