diff --git a/src/view/com/Tag.tsx b/src/view/com/Tag.tsx index 09149c8103..476647ec31 100644 --- a/src/view/com/Tag.tsx +++ b/src/view/com/Tag.tsx @@ -5,6 +5,7 @@ import { FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {isWeb} from 'platform/detection' import {usePalette} from 'lib/hooks/usePalette' import {Text, CustomTextProps} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' @@ -85,13 +86,16 @@ export function TagButton({ value, icon = 'x', onClick, + removeTag, }: { value: string icon?: React.ComponentProps['icon'] onClick?: (tag: string) => void + removeTag?: (tag: string) => void }) { const pal = usePalette('default') const [hovered, setHovered] = React.useState(false) + const [focused, setFocused] = React.useState(false) const hoverIn = React.useCallback(() => { setHovered(true) @@ -101,12 +105,32 @@ export function TagButton({ setHovered(false) }, [setHovered]) + React.useEffect(() => { + if (!isWeb) return + + function listener(e: KeyboardEvent) { + if (e.key === 'Backspace') { + if (focused) { + removeTag?.(value) + } + } + } + + document.addEventListener('keydown', listener) + + return () => { + document.removeEventListener('keydown', listener) + } + }, [value, focused, removeTag]) + return ( onClick?.(value)} onPointerEnter={hoverIn} onPointerLeave={hoverOut} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} style={state => [ pal.viewLight, styles.tagButton, diff --git a/src/view/com/composer/TagInput/index.web.tsx b/src/view/com/composer/TagInput/index.web.tsx index 76406945c9..ffaf04a057 100644 --- a/src/view/com/composer/TagInput/index.web.tsx +++ b/src/view/com/composer/TagInput/index.web.tsx @@ -14,6 +14,7 @@ import { } from '@fortawesome/react-native-fontawesome' import {Pin} from 'pind' +import {isWeb} from 'platform/detection' import {TagsAutocompleteModel} from 'state/models/ui/tags-autocomplete' import {usePalette} from 'lib/hooks/usePalette' import {TagButton} from 'view/com/Tag' @@ -132,6 +133,14 @@ export function TagInput({ } else if (key === 'ArrowDown') { e.preventDefault() setSelectedItemIndex((selectedItemIndex + 1) % dropdownItems.length) + } else if ( + isWeb && + key === 'Tab' && + // @ts-ignore web only + !e.nativeEvent.shiftKey + ) { + e.preventDefault() + onSubmitEditing() } } }, @@ -145,6 +154,7 @@ export function TagInput({ setSelectedItemIndex, addTags, addTagAndReset, + onSubmitEditing, ], ) @@ -244,7 +254,12 @@ export function TagInput({ )} {tags.map(tag => ( - + ))} {tags.length >= max ? null : (