handle focus on tag buttons

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<typeof FontAwesomeIcon>['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 (
     <Pressable
       accessibilityRole="button"
       onPress={() => onClick?.(value)}
       onPointerEnter={hoverIn}
       onPointerLeave={hoverOut}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
       style={state => [
         pal.viewLight,
         styles.tagButton,

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 => (
-              <TagButton key={tag} value={tag} onClick={removeTag} />
+              <TagButton
+                key={tag}
+                value={tag}
+                onClick={removeTag}
+                removeTag={removeTag}
+              />
             ))}
 
             {tags.length >= max ? null : (