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; return false;
}); });
let autocompleteOptions = {};
if (options.container) {
autocompleteOptions.dropdownMenuContainer = options.container;
} else {
autocompleteOptions.appendTo = document.querySelector('body');
}
$el.autocomplete({ $el.autocomplete({
appendTo: document.querySelector('body'), ...autocompleteOptions,
hint: false, hint: false,
autoselect: true, autoselect: true,
// openOnFocus has to be false, otherwise re-focus (after return from note type chooser dialog) forces // 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"> <input class="jump-to-note-autocomplete form-control" placeholder="search for note by its name">
</div> </div>
</div> </div>
<div class="jump-to-note-results"></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="show-in-full-text-button btn btn-sm">Search in full text <kbd>Ctrl+Enter</kbd></button> <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() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete"); 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 = this.$widget.find(".show-in-full-text-button");
this.$showInFullTextButton.on('click', e => this.showInFullText(e)); this.$showInFullTextButton.on('click', e => this.showInFullText(e));
@ -56,7 +59,10 @@ export default class JumpToNoteDialog extends BasicWidget {
} }
async refresh() { 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 // clear any event listener added in previous invocation of this function
.off('autocomplete:noteselected') .off('autocomplete:noteselected')
.on('autocomplete:noteselected', function (event, suggestion, dataset) { .on('autocomplete:noteselected', function (event, suggestion, dataset) {