luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve "search as you type" feature

Browse Source
This commit is contained in:
Thomas Nordquist
2019-06-24 11:34:04 +02:00
parent ba91730f43
commit e0d35548c5
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/components/Layout/SearchBar.tsx
View File

@@ -8,6 +8,7 @@ import { InputBase } from '@material-ui/core'
import { settingsActions } from '../../actions' import { settingsActions } from '../../actions'
import { fade, Theme, withStyles } from '@material-ui/core/styles' import { fade, Theme, withStyles } from '@material-ui/core/styles'
import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler' import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
import { KeyCodes } from '../../utils/KeyCodes'
function SearchBar(props: { function SearchBar(props: {
classes: any classes: any
@@ -34,10 +35,13 @@ function SearchBar(props: {
useGlobalKeyEventHandler(undefined, event => { useGlobalKeyEventHandler(undefined, event => {
const isCharacter = event.key.length === 1 const isCharacter = event.key.length === 1
const isBackspace = event.key === 'Backspace' const isAllowedControlCharacter = event.keyCode === KeyCodes.backspace || event.keyCode === KeyCodes.delete
const isBodyActiveElement = document.activeElement && document.activeElement.tagName === 'BODY' const tagNameBlacklist = ['INPUT', 'TEXTAREA', 'RADIO', 'CHECKBOX', 'OPTION', 'FORM']
if ((isCharacter || isBackspace) && !hasFocus && isBodyActiveElement && hasConnection) { const tagElementIsNotBlacklisted =
document.activeElement && tagNameBlacklist.indexOf(document.activeElement.tagName) === -1
if ((isCharacter || isAllowedControlCharacter) && !hasFocus && tagElementIsNotBlacklisted && hasConnection) {
// Focus input field, no preventDefault the event will reach the input element after it has been focussed // Focus input field, no preventDefault the event will reach the input element after it has been focussed
inputRef.current && inputRef.current.focus() inputRef.current && inputRef.current.focus()
} }

2
app/src/utils/KeyCodes.ts
View File

@@ -1,4 +1,6 @@
export enum KeyCodes { export enum KeyCodes {
backspace = 8,
enter = 13, enter = 13,
escape = 27, escape = 27,
delete = 46,
} }