deblan-mirror/dnote
1
0
Fork 0
mirror of https://github.com/dnote/dnote synced 2026-03-18 00:09:56 +01:00
Code Issues Projects Releases Packages Wiki Activity

Allow to select books with printable characters while trigger is focused (#262)

Browse source
This commit is contained in:
Sung Won Cho 2019-10-02 17:16:07 +08:00 • committed by GitHub
commit 46384b237a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
jslib/src/helpers/keyboard.ts
View file

@ -24,3 +24,8 @@ export const KEYCODE_TAB = 9;
// alphabet
export const KEYCODE_LOWERCASE_B = 66;
// isPrintableKey returns if the key represented in the given event is printable.
export function isPrintableKey(e: KeyboardEvent) {
return e.key.length === 1;
}

9
web/src/components/Common/Editor/BookSelector/index.tsx
View file

@ -20,6 +20,7 @@ import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { booksToOptions } from 'jslib/helpers/select';
import { isPrintableKey } from 'jslib/helpers/keyboard';
import Popover from '../../Popover';
import SearchableMenu from '../../SearchableMenu';
import BookIcon from '../../../Icons/Book';
@ -117,6 +118,14 @@ const BookSelector: React.SFC<Props> = ({
onClick={() => {
setIsOpen(!isOpen);
}}
onKeyDown={e => {
if (isPrintableKey(e.nativeEvent)) {
e.preventDefault();
setTextboxValue(e.key);
setIsOpen(true);
}
}}
aria-haspopup="menu"
aria-expanded={ariaExpanded}
aria-controls="book-filter"