source/content-scripts/features/autocomplete.tsx

@@ -33,12 +33,6 @@ type State = {
   /** The position where the group autocompletion list should be shown. */
   groupsPosition: Offset | undefined;
 
-  /** The currently highlighted match index of the active list. */
-  highlightedIndex: number;
-
-  /** Whether the user is currently typing in an autocomplete section. */
-  typingInAutocomplete: boolean;
-
   /** All the usernames without leading @-symbols. */
   usernames: Set<string>;
 
@@ -52,27 +46,6 @@ type State = {
   usernamesPosition: Offset | undefined;
 };
 
-/** All the properties we need to handle `<textarea>` input. */
-type TextareaInputProps = {
-  /** Which key is being pressed. */
-  key: string;
-
-  /** The prefix for the autocomplete to detect. */
-  prefix: "~" | "@";
-
-  /** Whether SHIFT is being pressed. */
-  shift: boolean;
-
-  /** The list of values we are targetting. */
-  target: "groups" | "usernames";
-
-  /** The `<textarea>` element. */
-  textarea: HTMLTextAreaElement;
-
-  /** The current set of values to match against. */
-  values: Set<string>;
-};
-
 export class AutocompleteFeature extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -100,8 +73,6 @@ export class AutocompleteFeature extends Component<Props, State> {
       groupsHidden: true,
       groupsMatches: new Set(groups),
       groupsPosition: undefined,
-      highlightedIndex: 0,
-      typingInAutocomplete: false,
       usernames: new Set(usernames),
       usernamesHidden: true,
       usernamesMatches: new Set(usernames),
@@ -131,63 +102,42 @@ export class AutocompleteFeature extends Component<Props, State> {
       return;
     }
 
-    // Get the key that was pressed.
-    const [key, shift] =
-      event instanceof KeyboardEvent
-        ? [event.key, event.shiftKey]
-        : [event.data, false];
-
-    if (this.state.typingInAutocomplete && ["Enter", "Tab"].includes(key)) {
-      // If the user is typing with an autocomplete list active then prevent
-      // certain keys from taking effect, like Tab moving the focus away.
-      event.preventDefault();
-    }
-
     // Helper function to create autocompletes with.
     const createHandler = (
-      prefix: TextareaInputProps["prefix"],
+      prefix: string,
-      target: TextareaInputProps["target"],
+      target: string,
-      values: TextareaInputProps["values"],
+      values: Set<string>,
     ) => {
       const dataAttribute = `data-trx-autocomplete-${target}`;
 
+      // Get the key that was pressed.
+      const key = event instanceof KeyboardEvent ? event.key : event.data;
+
       if (key === prefix && !textarea.getAttribute(dataAttribute)) {
         textarea.setAttribute(dataAttribute, "true");
-        textarea.addEventListener("keyup", (innerEvent) => {
+        textarea.addEventListener("keyup", (event) => {
-          this.textareaInputHandler({
+          if (!(event.target instanceof HTMLTextAreaElement)) {
-            key: innerEvent.key,
+            return;
-            prefix,
+          }
-            shift: innerEvent.shiftKey,
+
-            target,
+          this.textareaInputHandler(event.target, prefix, target, values);
-            textarea,
-            values,
-          });
         });
 
-        this.textareaInputHandler({
+        this.textareaInputHandler(textarea, prefix, target, values);
-          key,
-          prefix,
-          shift,
-          target,
-          textarea,
-          values,
-        });
       }
     };
 
     createHandler("~", "groups", this.state.groups);
     createHandler("@", "usernames", this.state.usernames);
-
-    if (["~", "@"].includes(key)) {
-      // When an autocomplete is first started manually set that we're typing
-      // in it.
-      this.setState({typingInAutocomplete: true});
-    }
   };
 
   /** The input handler for any `<textarea>` elements. */
-  textareaInputHandler = (props: TextareaInputProps) => {
+  textareaInputHandler = (
-    const {key, prefix, shift, target, textarea, values} = props;
+    textarea: HTMLTextAreaElement,
+    prefix: string,
+    target: string,
+    values: Set<string>,
+  ) => {
     const text = textarea.value;
 
     // If the prefix isn't in the textarea, return early.
@@ -211,13 +161,7 @@ export class AutocompleteFeature extends Component<Props, State> {
     // groups cannot have whitespace in them which means that the user has
     // finished typing what the autocomplete should handle.
     if (/\s/.test(input)) {
-      if (key === " " || key === "Backspace") {
-        // If Space or Backspace were pressed and there was nothing between the
-        // prefix and current cursor position then it means we don't want to
-        // continue showing the autocomplete list.
       this.hide(target);
-      }
-
       return;
     }
 
@@ -234,63 +178,14 @@ export class AutocompleteFeature extends Component<Props, State> {
       return;
     }
 
-    let {highlightedIndex} = this.state;
+    // Otherwise make sure the list is shown in the correct place and also
-    if (key === "Enter") {
+    // has all the new matches.
-      // Grab the highlighted match.
-      const highlightedMatch = Array.from(matches)[highlightedIndex];
-      if (highlightedMatch === undefined) {
-        log(
-          `Autocomplete: Attempted to enter undefined match with index ${highlightedIndex}`,
-          true,
-        );
-        return;
-      }
-
-      // Then insert it into the textarea.
-      textarea.value =
-        // First grab the existing text up to and including the current prefix.
-        text.slice(0, prefixIndex + prefix.length) +
-        // Then add the highlighted match.
-        highlightedMatch +
-        // And finally add the existing text where the cursor was positioned.
-        text.slice(position);
-      this.hide(target);
-      highlightedIndex = 0;
-
-      // Set the cursor position to the end of the autocompleted match.
-      const newPosition = prefixIndex + prefix.length + highlightedMatch.length;
-      textarea.selectionStart = newPosition;
-      textarea.selectionEnd = newPosition;
-    } else if (key === "Tab") {
-      if (shift) {
-        // If shift is being pressed move the highlight back up.
-        highlightedIndex -= 1;
-      } else {
-        // Otherwise with just tab being pressed move it down.
-        highlightedIndex += 1;
-      }
-    } else {
-      // When any other key is pressed make sure the list is shown in the
-      // correct place and also has all the new matches.
     this.show(target, offset(textarea));
     this.update(target, matches);
-    }
-
-    // Make sure the highlighted index is never set out of bounds.
-    if (highlightedIndex < 0) {
-      highlightedIndex = matches.size - 1;
-    } else if (highlightedIndex >= matches.size) {
-      highlightedIndex = 0;
-    }
-
-    this.setState({highlightedIndex});
   };
 
   /** Update the available matches. */
-  update = (
+  update = (target: string, matches: Set<string>) => {
-    target: TextareaInputProps["target"],
-    matches: TextareaInputProps["values"],
-  ) => {
     if (target === "groups") {
       this.setState({
         groupsMatches: matches,
@@ -303,46 +198,36 @@ export class AutocompleteFeature extends Component<Props, State> {
   };
 
   /** Show the autocomplete list in the given position. */
-  show = (target: TextareaInputProps["target"], position: Offset) => {
+  show = (target: string, position: Offset) => {
     if (target === "groups") {
       this.setState({
         groupsHidden: false,
         groupsPosition: position,
-        typingInAutocomplete: true,
       });
     } else if (target === "usernames") {
       this.setState({
         usernamesHidden: false,
         usernamesPosition: position,
-        typingInAutocomplete: true,
       });
     }
   };
 
   /** Hide the autocomplete list. */
-  hide = (target: TextareaInputProps["target"]) => {
+  hide = (target: string) => {
     if (target === "groups") {
-      this.setState({
+      this.setState({groupsHidden: true});
-        groupsHidden: true,
-        typingInAutocomplete: false,
-      });
     } else if (target === "usernames") {
-      this.setState({
+      this.setState({usernamesHidden: true});
-        usernamesHidden: true,
-        typingInAutocomplete: false,
-      });
     }
   };
 
   render() {
-    const {groupsMatches, highlightedIndex, usernamesMatches} = this.state;
-
     // Create the `<li>` elements for groups and usernames.
-    const groups = [...groupsMatches].map((value, index) => (
+    const groups = [...this.state.groupsMatches].map((value) => (
-      <li class={highlightedIndex === index ? "highlighted" : ""}>~{value}</li>
+      <li>~{value}</li>
     ));
-    const usernames = [...usernamesMatches].map((value, index) => (
+    const usernames = [...this.state.usernamesMatches].map((value) => (
-      <li class={highlightedIndex === index ? "highlighted" : ""}>@{value}</li>
+      <li>@{value}</li>
     ));
 
     // Figure out which lists are hidden.

source/options/components/autocomplete.tsx

@@ -7,10 +7,6 @@ export function AutocompleteSetting(props: SettingProps): JSX.Element {
       <p class="info">
         Adds autocompletion in textareas for user mentions (starting with{" "}
         <code>@</code>) and groups (starting with <code>~</code>).
-        <br />
-        When an autocompletion list is shown you can press <code>Tab</code> to
-        move down the list and <code>Shift+Tab</code> to move up the list. To
-        fill in your highlighted match press <code>Enter</code>.
       </p>
     </Setting>
   );

source/scss/scripts/_autocomplete.scss

@@ -4,21 +4,10 @@
   font-size: 80%;
   max-height: 8rem;
   overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-y: auto;
   position: absolute;
 
   li {
     margin: 0;
-
-    &.highlighted {
-      align-items: center;
-      background-color: var(--background-primary-color);
-      display: flex;
-
-      &::after {
-        content: '⏎';
-        margin-left: auto;
-      }
-    }
   }
 }