mirror of
https://github.com/zulip/zulip.git
synced 2025-10-26 17:43:58 +00:00
typeahead: Fix typeahead position not updating on pill remove.
Calls popper instance update method to refresh the position of the typeahead menu.
This commit is contained in:
@@ -505,7 +505,8 @@ export class Typeahead<ItemType extends string | object> {
|
|||||||
.on("keypress", this.keypress.bind(this))
|
.on("keypress", this.keypress.bind(this))
|
||||||
.on("keyup", this.keyup.bind(this))
|
.on("keyup", this.keyup.bind(this))
|
||||||
.on("click", this.element_click.bind(this))
|
.on("click", this.element_click.bind(this))
|
||||||
.on("keydown", this.keydown.bind(this));
|
.on("keydown", this.keydown.bind(this))
|
||||||
|
.on("typeahead.refreshPosition", this.refreshPosition.bind(this));
|
||||||
|
|
||||||
this.$menu
|
this.$menu
|
||||||
.on("click", "li", this.click.bind(this))
|
.on("click", "li", this.click.bind(this))
|
||||||
@@ -736,6 +737,14 @@ export class Typeahead<ItemType extends string | object> {
|
|||||||
this.$menu.find(".active").removeClass("active");
|
this.$menu.find(".active").removeClass("active");
|
||||||
$(e.currentTarget).addClass("active");
|
$(e.currentTarget).addClass("active");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
refreshPosition(e: JQuery.Event): void {
|
||||||
|
e.stopPropagation();
|
||||||
|
// Refresh the typeahead menu to account for any changes in the
|
||||||
|
// input position by asking popper to recompute your tooltip's position.
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||||
|
this.instance?.popperInstance?.update();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TYPEAHEAD PLUGIN DEFINITION
|
/* TYPEAHEAD PLUGIN DEFINITION
|
||||||
|
|||||||
@@ -440,6 +440,9 @@ export function create<T>(opts: InputPillCreateOptions<T>): InputPillContainer<T
|
|||||||
const $next = $pill.next();
|
const $next = $pill.next();
|
||||||
|
|
||||||
funcs.removePill($pill[0]!);
|
funcs.removePill($pill[0]!);
|
||||||
|
// Since removing a pill moves the $input, typeahead needs to refresh
|
||||||
|
// to appear at the correct position.
|
||||||
|
store.$input.trigger(new $.Event("typeahead.refreshPosition"));
|
||||||
$next.trigger("focus");
|
$next.trigger("focus");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user