paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

typeahead: Migrate to use key instead of keyCode.

Browse Source 
`keyCode` is deprecated and those values are not readable.
This commit is contained in:
Aman Agrawal
2024-08-22 12:38:34 +00:00
committed by Tim Abbott
parent 8b147d92a8
commit 04aada3589
3 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/bootstrap_typeahead.ts
View File

@@ -173,15 +173,15 @@ import * as tippy from "tippy.js";
import * as scroll_util from "./scroll_util"; import * as scroll_util from "./scroll_util";
import {get_string_diff, the} from "./util"; import {get_string_diff, the} from "./util";
function get_pseudo_keycode( function get_pseudo_key(
event: JQuery.KeyDownEvent | JQuery.KeyUpEvent | JQuery.KeyPressEvent, event: JQuery.KeyDownEvent | JQuery.KeyUpEvent | JQuery.KeyPressEvent,
): number { ): string {
const isComposing = event.originalEvent?.isComposing ?? false; const isComposing = event.originalEvent?.isComposing ?? false;
/* We treat IME compose enter keypresses as a separate -13 key. */ /* Ignore IME compose enter keypresses. (See 7 above) */
if (event.keyCode === 13 && isComposing) { if (event.code === "Enter" && isComposing) {
return -13; return "IgnoreEnter";
} }
return event.keyCode; return event.key;
} }
export function defaultSorter(items: string[], query: string): string[] { export function defaultSorter(items: string[], query: string): string[] {
@@ -262,7 +262,7 @@ export class Typeahead<ItemType extends string | object> {
helpOnEmptyStrings: boolean; helpOnEmptyStrings: boolean;
tabIsEnter: boolean; tabIsEnter: boolean;
stopAdvance: boolean; stopAdvance: boolean;
advanceKeyCodes: number[]; advanceKeys: string[];
non_tippy_parent_element: string | undefined; non_tippy_parent_element: string | undefined;
values: WeakMap<HTMLElement, ItemType>; values: WeakMap<HTMLElement, ItemType>;
instance: tippy.Instance | undefined; instance: tippy.Instance | undefined;
@@ -305,7 +305,7 @@ export class Typeahead<ItemType extends string | object> {
// return a string to show in typeahead items or false. // return a string to show in typeahead items or false.
this.option_label = options.option_label ?? (() => false); this.option_label = options.option_label ?? (() => false);
this.stopAdvance = options.stopAdvance ?? false; this.stopAdvance = options.stopAdvance ?? false;
this.advanceKeyCodes = options.advanceKeyCodes ?? []; this.advanceKeys = options.advanceKeys ?? [];
this.openInputFieldOnKeyUp = options.openInputFieldOnKeyUp; this.openInputFieldOnKeyUp = options.openInputFieldOnKeyUp;
this.closeInputFieldOnHide = options.closeInputFieldOnHide; this.closeInputFieldOnHide = options.closeInputFieldOnHide;
this.tabIsEnter = options.tabIsEnter ?? true; this.tabIsEnter = options.tabIsEnter ?? true;
@@ -650,10 +650,10 @@ export class Typeahead<ItemType extends string | object> {
} }
maybeStopAdvance(e: JQuery.KeyPressEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent): void { maybeStopAdvance(e: JQuery.KeyPressEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent): void {
const pseudo_keycode = get_pseudo_keycode(e); const pseudo_key = get_pseudo_key(e);
if ( if (
(this.stopAdvance || (pseudo_keycode !== 9 && pseudo_keycode !== 13)) && (this.stopAdvance || (pseudo_key !== "Tab" && pseudo_key !== "Enter")) &&
!this.advanceKeyCodes.includes(e.keyCode) !this.advanceKeys.includes(e.key)
) { ) {
e.stopPropagation(); e.stopPropagation();
} }
@@ -663,27 +663,27 @@ export class Typeahead<ItemType extends string | object> {
if (!this.shown) { if (!this.shown) {
return; return;
} }
const pseudo_keycode = get_pseudo_keycode(e); const pseudo_key = get_pseudo_key(e);
switch (pseudo_keycode) { switch (pseudo_key) {
case 9: // tab case "Tab":
if (!this.tabIsEnter) { if (!this.tabIsEnter) {
return; return;
} }
e.preventDefault(); e.preventDefault();
break; break;
case 13: // enter case "Enter":
case 27: // escape case "Escape":
e.preventDefault(); e.preventDefault();
break; break;
case 38: // up arrow case "ArrowUp":
e.preventDefault(); e.preventDefault();
this.prev(); this.prev();
break; break;
case 40: // down arrow case "ArrowDown":
e.preventDefault(); e.preventDefault();
this.next(); this.next();
break; break;
@@ -702,7 +702,7 @@ export class Typeahead<ItemType extends string | object> {
} }
keydown(e: JQuery.KeyDownEvent): void { keydown(e: JQuery.KeyDownEvent): void {
const pseudo_keycode = get_pseudo_keycode(e); const pseudo_key = get_pseudo_key(e);
if (this.trigger_selection(e)) { if (this.trigger_selection(e)) {
if (!this.shown) { if (!this.shown) {
return; return;
@@ -710,7 +710,9 @@ export class Typeahead<ItemType extends string | object> {
e.preventDefault(); e.preventDefault();
this.select(e); this.select(e);
} }
this.suppressKeyPressRepeat = ![40, 38, 9, 13, 27].includes(pseudo_keycode); this.suppressKeyPressRepeat = !["ArrowDown", "ArrowUp", "Tab", "Enter", "Escape"].includes(
pseudo_key,
);
this.move(e); this.move(e);
} }
@@ -729,14 +731,14 @@ export class Typeahead<ItemType extends string | object> {
// it did modify the query. For example, `Command + delete` on Mac // it did modify the query. For example, `Command + delete` on Mac
// doesn't trigger a keyup event but when `Command` is released, it // doesn't trigger a keyup event but when `Command` is released, it
// triggers a keyup event which correctly updates the list. // triggers a keyup event which correctly updates the list.
const pseudo_keycode = get_pseudo_keycode(e); const pseudo_key = get_pseudo_key(e);
switch (pseudo_keycode) { switch (pseudo_key) {
case 40: // down arrow case "ArrowDown":
case 38: // up arrow case "ArrowUp":
break; break;
case 9: // tab case "Tab":
// If the typeahead is not shown or tabIsEnter option is not set, do nothing and return // If the typeahead is not shown or tabIsEnter option is not set, do nothing and return
if (!this.tabIsEnter || !this.shown) { if (!this.tabIsEnter || !this.shown) {
return; return;
@@ -754,14 +756,14 @@ export class Typeahead<ItemType extends string | object> {
break; break;
case 13: // enter case "Enter":
if (!this.shown) { if (!this.shown) {
return; return;
} }
this.select(e); this.select(e);
break; break;
case 27: // escape case "Escape":
if (!this.shown) { if (!this.shown) {
return; return;
} }
@@ -773,9 +775,9 @@ export class Typeahead<ItemType extends string | object> {
default: default:
// to stop typeahead from showing up momentarily // to stop typeahead from showing up momentarily
// when shift (keycode 16) + tabbing to the topic field // when shift + tabbing to the topic field
if ( if (
pseudo_keycode === 16 && pseudo_key === "Shift" &&
the(this.input_element.$element).id === "stream_message_recipient_topic" the(this.input_element.$element).id === "stream_message_recipient_topic"
) { ) {
return; return;
@@ -787,7 +789,7 @@ export class Typeahead<ItemType extends string | object> {
// the search bar). // the search bar).
this.openInputFieldOnKeyUp(); this.openInputFieldOnKeyUp();
} }
if (pseudo_keycode === 8) { if (pseudo_key === "Backspace") {
this.lookup(this.hideOnEmptyAfterBackspace); this.lookup(this.hideOnEmptyAfterBackspace);
return; return;
} }
@@ -878,7 +880,7 @@ type TypeaheadOptions<ItemType> = {
items?: number; items?: number;
source: (query: string, input_element: TypeaheadInputElement) => ItemType[]; source: (query: string, input_element: TypeaheadInputElement) => ItemType[];
// optional options // optional options
advanceKeyCodes?: number[]; advanceKeys?: string[];
automated?: () => boolean; automated?: () => boolean;
closeInputFieldOnHide?: () => void; closeInputFieldOnHide?: () => void;
dropup?: boolean; dropup?: boolean;

4
web/src/portico/signup.ts
View File

@@ -153,8 +153,8 @@ $(() => {
$<HTMLInputElement>(".register-page input#email, .login-page-container input#id_username").on( $<HTMLInputElement>(".register-page input#email, .login-page-container input#id_username").on(
"focusout keydown", "focusout keydown",
function (e) { function (e) {
// check if it is the "focusout" or if it is a keydown, then check if // check if it is the "focusout" or if it is a keydown, then check
// the keycode was the one for "Enter". // if the key was "Enter"
if (e.type === "focusout" || e.key === "Enter") { if (e.type === "focusout" || e.key === "Enter") {
$(this).val($(this).val()!.trim()); $(this).val($(this).val()!.trim());
} }

5
web/src/search.ts
View File

@@ -222,10 +222,9 @@ export function initialize(opts: {on_narrow_search: OnNarrowSearch}): void {
sorter(items: string[]): string[] { sorter(items: string[]): string[] {
return items; return items;
}, },
// Turns off `stopPropagation` in the typeahead code for // Turns off `stopPropagation` in the typeahead code so that
// backspace, arrow left, arrow right, and enter so that
// we can manage those events for search pills. // we can manage those events for search pills.
advanceKeyCodes: [8, 13, 37, 39], advanceKeys: ["Backspace", "Enter", "ArrowLeft", "ArrowRight"],
// Use our custom typeahead `on_escape` hook to exit // Use our custom typeahead `on_escape` hook to exit
// the search bar as soon as the user hits Esc. // the search bar as soon as the user hits Esc.