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
				
			
		| 
						 | 
					@ -17,7 +17,7 @@ describe('Before setup instance', () => {
 | 
				
			||||||
    cy.visit('/');
 | 
					    cy.visit('/');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		cy.intercept('POST', '/api/admin/accounts/create').as('signup');
 | 
							cy.intercept('POST', '/api/admin/accounts/create').as('signup');
 | 
				
			||||||
	
 | 
					
 | 
				
			||||||
		cy.get('[data-cy-admin-username] input').type('admin');
 | 
							cy.get('[data-cy-admin-username] input').type('admin');
 | 
				
			||||||
		cy.get('[data-cy-admin-password] input').type('admin1234');
 | 
							cy.get('[data-cy-admin-password] input').type('admin1234');
 | 
				
			||||||
		cy.get('[data-cy-admin-ok]').click();
 | 
							cy.get('[data-cy-admin-ok]').click();
 | 
				
			||||||
| 
						 | 
					@ -112,7 +112,7 @@ describe('After user signup', () => {
 | 
				
			||||||
	});
 | 
						});
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
describe('After user singed in', () => {
 | 
					describe('After user signed in', () => {
 | 
				
			||||||
	beforeEach(() => {
 | 
						beforeEach(() => {
 | 
				
			||||||
		cy.resetState();
 | 
							cy.resetState();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -141,6 +141,19 @@ describe('After user singed in', () => {
 | 
				
			||||||
		cy.get('[data-cy-open-post-form-submit]').click();
 | 
							cy.get('[data-cy-open-post-form-submit]').click();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		cy.contains('Hello, Misskey!');
 | 
							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) {
 | 
					function onKeydown(ev: KeyboardEvent) {
 | 
				
			||||||
	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
 | 
						if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
 | 
				
			||||||
	if (ev.which === 27) emit('esc');
 | 
						if (ev.key === 'Escape') emit('esc');
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function onCompositionUpdate(ev: CompositionEvent) {
 | 
					function onCompositionUpdate(ev: CompositionEvent) {
 | 
				
			||||||
| 
						 | 
					@ -489,9 +489,9 @@ function onDragover(ev) {
 | 
				
			||||||
		switch (ev.dataTransfer.effectAllowed) {
 | 
							switch (ev.dataTransfer.effectAllowed) {
 | 
				
			||||||
			case 'all':
 | 
								case 'all':
 | 
				
			||||||
			case 'uninitialized':
 | 
								case 'uninitialized':
 | 
				
			||||||
			case 'copy': 
 | 
								case 'copy':
 | 
				
			||||||
			case 'copyLink': 
 | 
								case 'copyLink':
 | 
				
			||||||
			case 'copyMove': 
 | 
								case 'copyMove':
 | 
				
			||||||
				ev.dataTransfer.dropEffect = 'copy';
 | 
									ev.dataTransfer.dropEffect = 'copy';
 | 
				
			||||||
				break;
 | 
									break;
 | 
				
			||||||
			case 'linkMove':
 | 
								case 'linkMove':
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,10 +53,10 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 | 
				
			||||||
	return result;
 | 
						return result;
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const ignoreElemens = ['input', 'textarea'];
 | 
					const ignoreElements = ['input', 'textarea'];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
 | 
					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) &&
 | 
						return patterns.some(pattern => pattern.which.includes(key) &&
 | 
				
			||||||
		pattern.ctrl === ev.ctrlKey &&
 | 
							pattern.ctrl === ev.ctrlKey &&
 | 
				
			||||||
		pattern.shift === ev.shiftKey &&
 | 
							pattern.shift === ev.shiftKey &&
 | 
				
			||||||
| 
						 | 
					@ -70,7 +70,7 @@ export const makeHotkey = (keymap: Keymap) => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	return (ev: KeyboardEvent) => {
 | 
						return (ev: KeyboardEvent) => {
 | 
				
			||||||
		if (document.activeElement) {
 | 
							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;
 | 
								if (document.activeElement.attributes['contenteditable']) return;
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -16,18 +16,3 @@ export const aliases = {
 | 
				
			||||||
	'right': 'ArrowRight',
 | 
						'right': 'ArrowRight',
 | 
				
			||||||
	'plus': ['NumpadAdd', 'Semicolon'],
 | 
						'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