jump to note list: Use a fixed container instead of dropdown

This commit is contained in:
Elian Doran 2023-08-26 17:03:09 +03:00
parent c551eae651
commit abbd0b50eb
2 changed files with 15 additions and 2 deletions

View file

@ -137,8 +137,15 @@ function initNoteAutocomplete($el, options) {
return false;
});
let autocompleteOptions = {};
if (options.container) {
autocompleteOptions.dropdownMenuContainer = options.container;
} else {
autocompleteOptions.appendTo = document.querySelector('body');
}
$el.autocomplete({
appendTo: document.querySelector('body'),
...autocompleteOptions,
hint: false,
autoselect: true,
// openOnFocus has to be false, otherwise re-focus (after return from note type chooser dialog) forces

View file

@ -20,6 +20,8 @@ const TPL = `<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="
<input class="jump-to-note-autocomplete form-control" placeholder="search for note by its name">
</div>
</div>
<div class="jump-to-note-results"></div>
</div>
<div class="modal-footer">
<button class="show-in-full-text-button btn btn-sm">Search in full text <kbd>Ctrl+Enter</kbd></button>
@ -40,6 +42,7 @@ export default class JumpToNoteDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
this.$results = this.$widget.find(".jump-to-note-results");
this.$showInFullTextButton = this.$widget.find(".show-in-full-text-button");
this.$showInFullTextButton.on('click', e => this.showInFullText(e));
@ -56,7 +59,10 @@ export default class JumpToNoteDialog extends BasicWidget {
}
async refresh() {
noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {hideGoToSelectedNoteButton: true})
noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
hideGoToSelectedNoteButton: true,
container: this.$results
})
// clear any event listener added in previous invocation of this function
.off('autocomplete:noteselected')
.on('autocomplete:noteselected', function (event, suggestion, dataset) {