diff --git a/CHANGELOG.md b/CHANGELOG.md
index 853fed305..cc7976306 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@
   [#1097](https://github.com/nextcloud/cookbook/pull/1097) @christianlupus
 - Ordering corrected for mobile and printout versions
   [#1107](https://github.com/nextcloud/cookbook/pull/1107) @christianlupus
+- Less intrusive sharp popup (suggestion menu for reference autocomplete)
+  [#1098](https://github.com/nextcloud/cookbook/pull/1098) @MarcelRobitaille
 
 ### Fixed
 - Prevent slow loading of recipes due to iteration over all files
diff --git a/package-lock.json b/package-lock.json
index f2197d0e1..a22973d70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@nextcloud/moment": "^1.1.1",
         "@nextcloud/router": "^2.0.0",
         "@nextcloud/vue": "^5.1.0",
+        "caret-pos": "2.0.0",
         "linkifyjs": "^3.0.1",
         "lozad": "^1.16.0",
         "sass": "^1.5.0",
@@ -2628,6 +2629,11 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
+    "node_modules/caret-pos": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caret-pos/-/caret-pos-2.0.0.tgz",
+      "integrity": "sha512-cOIiBS1SjzXg+LXSiQAzGg89dHDKq/y4c30+tB5hkVN7GbtXh1BNypOmjti4LwAWQrvP4y+bNG7RJFxLGoL3bA=="
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -7128,7 +7134,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -14296,6 +14301,11 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
       "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw=="
     },
+    "caret-pos": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caret-pos/-/caret-pos-2.0.0.tgz",
+      "integrity": "sha512-cOIiBS1SjzXg+LXSiQAzGg89dHDKq/y4c30+tB5hkVN7GbtXh1BNypOmjti4LwAWQrvP4y+bNG7RJFxLGoL3bA=="
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -17771,8 +17781,7 @@
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
     "natural-compare": {
       "version": "1.4.0",
diff --git a/package.json b/package.json
index d36a6b12a..4be96f51c 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^2.0.0",
     "@nextcloud/vue": "^5.1.0",
+    "caret-pos": "2.0.0",
     "linkifyjs": "^3.0.1",
     "lozad": "^1.16.0",
     "sass": "^1.5.0",
diff --git a/src/components/EditInputField.vue b/src/components/EditInputField.vue
index fb81163c9..3e97c38ee 100644
--- a/src/components/EditInputField.vue
+++ b/src/components/EditInputField.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset @keyup="keyPressed">
+    <fieldset>
         <label>
             {{ fieldLabel }}
         </label>
@@ -8,6 +8,11 @@
             ref="inputField"
             v-model="content"
             @input="handleInput"
+            @keydown="keyDown"
+            @keyup="handleSuggestionsPopupKeyUp"
+            @focus="handleSuggestionsPopupFocus"
+            @blur="handleSuggestionsPopupBlur"
+            @mouseup="handleSuggestionsPopupMouseUp"
         />
         <div v-else>
             <slot />
@@ -17,14 +22,31 @@
                 v-model="content"
                 :type="fieldType"
                 @input="handleInput"
+                @keydown="keyDown"
+                @keyup="handleSuggestionsPopupKeyUp"
+                @focus="handleSuggestionsPopupFocus"
+                @blur="handleSuggestionsPopupBlur"
+                @mouseup="handleSuggestionsPopupMouseUp"
             />
         </div>
+        <SuggestionsPopup
+            v-if="suggestionsPopupVisible"
+            ref="suggestionsPopup"
+            v-bind="suggestionsData"
+            :options="filteredSuggestionOptions"
+        />
     </fieldset>
 </template>
 
 <script>
+import SuggestionsPopup, { suggestionsPopupMixin } from "./SuggestionsPopup.vue"
+
 export default {
     name: "EditInputField",
+    components: {
+        SuggestionsPopup,
+    },
+    mixins: [suggestionsPopupMixin],
     props: {
         fieldLabel: {
             type: String,
@@ -34,10 +56,6 @@ export default {
             type: String,
             default: "",
         },
-        referencePopupEnabled: {
-            type: Boolean,
-            default: false,
-        },
         // Value (passed in v-model)
         // eslint-disable-next-line vue/require-prop-types
         value: {
@@ -65,55 +83,10 @@ export default {
         handleInput() {
             this.$emit("input", this.content)
         },
-        /**
-         * Catches # key down presses and opens recipe-references dialog
-         */
-        keyPressed(e) {
-            // Using keyup for trigger will prevent repeat triggering if key is held down
-            if (this.referencePopupEnabled && e.key === "#") {
-                e.preventDefault()
-                // Check if the letter before the hash
-                if (this.fieldType === "markdown") {
-                    // for reference: https://codemirror.net/doc/manual.html#api
-                    const cursorPos = JSON.parse(
-                        JSON.stringify(
-                            this.$refs.inputField.editor.getCursor("start")
-                        )
-                    )
-                    const prevChar = this.$refs.inputField.editor.getRange(
-                        { line: cursorPos.line, ch: cursorPos.ch - 2 },
-                        { line: cursorPos.line, ch: cursorPos.ch - 1 }
-                    )
-                    if (
-                        cursorPos.ch === 1 ||
-                        prevChar === " " ||
-                        prevChar === "\n" ||
-                        prevChar === "\r"
-                    ) {
-                        // beginning of line
-                        this.$parent.$emit("showRecipeReferencesPopup", {
-                            context: this,
-                        })
-                        this.lastCursorPosition = cursorPos
-                    }
-                } else {
-                    const cursorPos = this.$refs.inputField.selectionStart
-                    const content = this.$refs.inputField.value
-                    const prevChar =
-                        cursorPos > 1 ? content.charAt(cursorPos - 2) : ""
-                    if (
-                        cursorPos === 1 ||
-                        prevChar === " " ||
-                        prevChar === "\n" ||
-                        prevChar === "\r"
-                    ) {
-                        // Show dialog to select recipe
-                        this.$parent.$emit("showRecipeReferencesPopup", {
-                            context: this,
-                        })
-                        this.lastCursorPosition = cursorPos
-                    }
-                }
+        keyDown(e) {
+            // Redirect to suggestions handler if in suggestion mode
+            if (this.suggestionsPopupVisible) {
+                this.handleSuggestionsPopupKeyDown(e)
             }
         },
         pasteCanceled() {
diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue
index 8c04c29ca..79348182a 100644
--- a/src/components/EditInputGroup.vue
+++ b/src/components/EditInputGroup.vue
@@ -19,6 +19,9 @@
                     @keyup="keyUp"
                     @input="handleInput"
                     @paste="handlePaste"
+                    @focus="handleSuggestionsPopupFocus"
+                    @blur="handleSuggestionsPopupBlur"
+                    @mouseup="handleSuggestionsPopupMouseUp"
                 />
                 <textarea
                     v-else-if="fieldType === 'textarea'"
@@ -28,6 +31,9 @@
                     @keyup="keyUp"
                     @input="handleInput"
                     @paste="handlePaste"
+                    @focus="handleSuggestionsPopupFocus"
+                    @blur="handleSuggestionsPopupBlur"
+                    @mouseup="handleSuggestionsPopupMouseUp"
                 ></textarea>
                 <div class="controls">
                     <button
@@ -51,6 +57,15 @@
                         @click="deleteEntry(idx)"
                     ></button>
                 </div>
+                <SuggestionsPopup
+                    v-if="
+                        suggestionsPopupVisible &&
+                        suggestionsData.fieldIndex === idx
+                    "
+                    ref="suggestionsPopup"
+                    v-bind="suggestionsData"
+                    :options="filteredSuggestionOptions"
+                />
             </li>
         </ul>
         <button class="button add-list-item" @click="addNewEntry()">
@@ -60,6 +75,8 @@
 </template>
 
 <script>
+import SuggestionsPopup, { suggestionsPopupMixin } from "./SuggestionsPopup.vue"
+
 const linesMatchAtPosition = (lines, i) =>
     lines.every((line) => line[i] === lines[0][i])
 const findCommonPrefix = (lines) => {
@@ -82,6 +99,10 @@ const findCommonPrefix = (lines) => {
 
 export default {
     name: "EditInputGroup",
+    components: {
+        SuggestionsPopup,
+    },
+    mixins: [suggestionsPopupMixin],
     props: {
         value: {
             type: Array,
@@ -108,10 +129,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        referencePopupEnabled: {
-            type: Boolean,
-            default: false,
-        },
     },
     data() {
         return {
@@ -268,6 +285,12 @@ export default {
                 return
             }
 
+            // Redirect to suggestions handler if in suggestion mode
+            if (this.suggestionsPopupVisible) {
+                this.handleSuggestionsPopupKeyDown(e)
+                return
+            }
+
             // Allow new lines with shift key
             if (e.shiftKey) {
                 // Do nothing here, user wants a line break
@@ -318,38 +341,14 @@ export default {
                 return
             }
 
-            // Only do anything for enter or # keys
-            if (!(this.referencePopupEnabled && e.key === "#")) {
-                return
-            }
-
-            // Get the index of the pressed list item
             const $li = e.currentTarget.closest("li")
             const $ul = $li.closest("ul")
             const $pressedLiIndex = Array.prototype.indexOf.call(
                 $ul.childNodes,
                 $li
             )
-
-            // Get the position of the cursor and the content of the input
-            const elm = this.$refs["list-field"][$pressedLiIndex]
-            const cursorPos = elm.selectionStart
-            const content = elm.value
-
-            // Show the popup only if the # was inserted at the very
-            // beggining of the input or after any whitespace character
-            if (
-                !(cursorPos === 1 || /\s/.test(content.charAt(cursorPos - 2)))
-            ) {
-                return
-            }
-
-            // Show dialog to select recipe
-            this.$parent.$emit("showRecipeReferencesPopup", {
-                context: this,
-            })
             this.lastFocusedFieldIndex = $pressedLiIndex
-            this.lastCursorPosition = cursorPos
+            this.handleSuggestionsPopupKeyUp(e)
         },
         moveEntryDown(index) {
             if (index >= this.buffer.length - 1) {
@@ -421,6 +420,7 @@ button {
 }
 
 fieldset {
+    position: relative;
     width: 100%;
     margin-bottom: 1em;
 }
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index 4af7fbd3d..a2401893b 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -10,7 +10,7 @@
             v-model="recipe['description']"
             :field-type="'markdown'"
             :field-label="t('cookbook', 'Description')"
-            :reference-popup-enabled="true"
+            :suggestion-options="allRecipeOptions"
         />
         <EditInputField
             v-model="recipe['url']"
@@ -85,7 +85,7 @@
             :field-type="'text'"
             :field-label="t('cookbook', 'Tools')"
             :create-fields-on-newlines="true"
-            :reference-popup-enabled="true"
+            :suggestion-options="allRecipeOptions"
         />
         <EditInputGroup
             v-model="recipe['recipeIngredient']"
@@ -93,7 +93,7 @@
             :field-type="'text'"
             :field-label="t('cookbook', 'Ingredients')"
             :create-fields-on-newlines="true"
-            :reference-popup-enabled="true"
+            :suggestion-options="allRecipeOptions"
         />
         <EditInputGroup
             v-model="recipe['recipeInstructions']"
@@ -102,7 +102,7 @@
             :field-label="t('cookbook', 'Instructions')"
             :create-fields-on-newlines="true"
             :show-step-number="true"
-            :reference-popup-enabled="true"
+            :suggestion-options="allRecipeOptions"
         />
         <div class="cookbook-footer">
             <button class="button" @click="save()">
@@ -116,16 +116,6 @@
                 {{ t("cookbook", "Save") }}
             </button>
         </div>
-        <edit-multiselect-popup
-            ref="referencesPopup"
-            class="references-popup"
-            :class="{ visible: referencesPopupFocused }"
-            :options="allRecipeOptions"
-            track-by="recipe_id"
-            label="title"
-            :loading="loadingRecipeReferences"
-            :focused="referencesPopupFocused"
-        />
     </div>
 </template>
 
@@ -144,7 +134,6 @@ import EditInputField from "./EditInputField.vue"
 import EditInputGroup from "./EditInputGroup.vue"
 import EditMultiselect from "./EditMultiselect.vue"
 import EditMultiselectInputGroup from "./EditMultiselectInputGroup.vue"
-import EditMultiselectPopup from "./EditMultiselectPopup.vue"
 import EditTimeField from "./EditTimeField.vue"
 
 export default {
@@ -156,7 +145,6 @@ export default {
         EditMultiselect,
         EditTimeField,
         EditMultiselectInputGroup,
-        EditMultiselectPopup,
         Actions,
         ActionButton,
         NumericIcon,
@@ -327,7 +315,6 @@ export default {
                 },
             ],
             referencesPopupFocused: false,
-            popupContext: undefined,
             loadingRecipeReferences: true,
             showRecipeYield: true,
         }
@@ -425,25 +412,6 @@ export default {
                 this.recipe.recipeCategory = val[0]
             }
         })
-        // Register recipe-reference selection hook for showing popup when requested
-        // from a child element
-        this.$off("showRecipeReferencesPopup")
-        this.$on("showRecipeReferencesPopup", (val) => {
-            this.referencesPopupFocused = true
-            this.popupContext = val
-        })
-        // Register hook when recipe reference has been selected in popup
-        this.$off("ms-popup-selected")
-        this.$on("ms-popup-selected", (opt) => {
-            this.referencesPopupFocused = false
-            this.popupContext.context.pasteString(`r/${opt.recipe_id} `)
-        })
-        // Register hook when recipe reference has been selected in popup
-        this.$off("ms-popup-selection-canceled")
-        this.$on("ms-popup-selection-canceled", () => {
-            this.referencesPopupFocused = false
-            this.popupContext.context.pasteCanceled()
-        })
         this.savingRecipe = false
 
         // Load data for all recipes to be used in recipe-reference popup suggestions
diff --git a/src/components/SuggestionsPopup.vue b/src/components/SuggestionsPopup.vue
new file mode 100644
index 000000000..92d09be5b
--- /dev/null
+++ b/src/components/SuggestionsPopup.vue
@@ -0,0 +1,420 @@
+<template>
+    <div
+        class="suggestions-popup"
+        :style="{
+            left: `${offset.left}px`,
+            top: `${offset.top}px`,
+            width: `${width}px`,
+        }"
+    >
+        <ul ref="scroller" class="scroller">
+            <li
+                v-for="(option, i) in options"
+                :key="option.recipe_id"
+                class="item"
+                :class="{ focused: i === focusIndex }"
+            >
+                <a
+                    class="link"
+                    href="#"
+                    :data-id="option.recipe_id"
+                    @click="handleClick"
+                >
+                    {{ option.title }}
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { position as caretPosition } from "caret-pos"
+
+const clamp = (val, min, max) => Math.min(max, Math.max(min, val))
+
+export const SUGGESTIONS_POPUP_WIDTH = 300
+
+export const suggestionsPopupMixin = {
+    methods: {
+        /**
+         * Handle something selected by click or by `Enter`
+         * Insert the reference with `pasteString`,
+         * which should exist everywhere this mixin is used
+         * (`EditInputGroup` and `EditInputField`) and close the popup
+         */
+        handleSuggestionsPopupSelected(recipeId) {
+            const { field, hashPosition } = this.suggestionsData
+            const { value } = field
+            const before = value.slice(0, hashPosition)
+            const after = value.slice(field.selectionStart)
+            const replace = `r/${recipeId}`
+            const newValue = `${before}${replace}${after}`
+            if (this.buffer ?? false) {
+                this.buffer[this.suggestionsData.fieldIndex] = newValue
+                this.$emit("input", this.buffer)
+            } else {
+                this.$emit("input", newValue)
+            }
+            this.handleSuggestionsPopupCancel()
+            // set cursor to position after pasted string. Waiting two ticks is necessary for
+            // the data to be updated in the field
+            this.$nextTick(() => {
+                this.$nextTick(() => {
+                    field.focus()
+                    const newCursorPos = hashPosition + replace.length
+                    field.setSelectionRange(newCursorPos, newCursorPos)
+                })
+            })
+        },
+        /**
+         * Handle keyups events when the suggestions popup is open
+         * The event will be sent here from the normal keydown handler
+         * if suggestionsPopupVisible
+         */
+        handleSuggestionsPopupOpenKeyUp(e, cursorPos) {
+            const caretPos = caretPosition(e.target, {
+                customPos: this.suggestionsData.hashPosition - 1,
+            })
+
+            // Only update the popover position if the line changes (caret pos y changes)
+            if (caretPos.top !== this.suggestionsData.caretPos.top) {
+                this.suggestionsData.caretPos = caretPos
+            }
+
+            // Cancel suggestion popup on whitespace or caret movement
+            if (
+                [
+                    " ",
+                    "\t",
+                    "#",
+                    "ArrowLeft",
+                    "ArrowRight",
+                    "Home",
+                    "End",
+                    "PageUp",
+                    "PageDown",
+                    "Escape",
+                ].includes(e.key)
+            ) {
+                this.handleSuggestionsPopupCancel()
+                return
+            }
+
+            // Cancel suggestions popup if hash deleted
+            if (cursorPos < this.suggestionsData.hashPosition) {
+                this.handleSuggestionsPopupCancel()
+                return
+            }
+
+            // Update the search text
+            // Slice the input from the position of the "#" to the caret position
+            const { hashPosition, field } = this.suggestionsData
+            const searchText = field.value.slice(hashPosition, cursorPos)
+            this.suggestionsData = {
+                ...this.suggestionsData,
+                searchText,
+                caretIndex: field.selectionStart,
+            }
+        },
+        getClosestListItemIndex(field) {
+            const $li = field.closest("li")
+            const $ul = $li?.closest("ul")
+            if (!$ul) return null
+
+            return Array.prototype.indexOf.call($ul.childNodes, $li)
+        },
+        /**
+         * Shows the recipe linking popup when # is pressed
+         */
+        handleSuggestionsPopupKeyUp(e) {
+            const field = e.currentTarget
+            const cursorPos = field.selectionStart
+
+            // No suggestion options means suggestions are disabled for this input
+            if (!this.suggestionOptions) return
+
+            if (this.suggestionsPopupVisible) {
+                this.handleSuggestionsPopupOpenKeyUp(e, cursorPos)
+                return
+            }
+
+            // Only do anything for # key
+            if (e.key !== "#") return
+
+            // Show the popup only if the # was inserted at the very
+            // beggining of the input or after any whitespace character
+            if (
+                !(
+                    cursorPos === 1 ||
+                    /\s/.test(field.value.charAt(cursorPos - 2))
+                )
+            ) {
+                return
+            }
+
+            // Show dialog to select recipe
+            const caretPos = caretPosition(field, { customPos: cursorPos - 1 })
+            this.suggestionsData = {
+                field,
+                searchText: "",
+                caretPos,
+                focusIndex: 0,
+                hashPosition: cursorPos,
+                blurred: false,
+                caretIndex: field.selectionStart,
+                fieldIndex: this.getClosestListItemIndex(field),
+            }
+            this.lastCursorPosition = cursorPos
+        },
+        handleSuggestionsPopupKeyDown(e) {
+            if (!this.suggestionsPopupVisible) return
+
+            this.handleSuggestionsPopupOpenKeyDown(e)
+        },
+        /**
+         * Handle keydown events for suggestions popup
+         * The event will be sent here from the normal keydown handler
+         * if suggestionsPopupVisible
+         */
+        handleSuggestionsPopupOpenKeyDown(e) {
+            // Handle switching the focused option with up/down keys
+            if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+                e.preventDefault()
+
+                // Increment/decrement focuse index based on which key was pressed
+                // and constrain between 0 and length - 1
+                const focusIndex = clamp(
+                    this.suggestionsData.focusIndex +
+                        {
+                            ArrowUp: -1,
+                            ArrowDown: +1,
+                        }[e.key],
+                    0,
+                    this.suggestionOptions.length - 1
+                )
+                this.suggestionsData = {
+                    ...this.suggestionsData,
+                    focusIndex,
+                }
+                return
+            }
+
+            // Handle selecting the current option when enter is pressed
+            if (e.key === "Enter") {
+                e.preventDefault()
+                const { focusIndex } = this.suggestionsData
+                const selection = this.filteredSuggestionOptions[focusIndex]
+                this.handleSuggestionsPopupSelected(selection.recipe_id)
+            }
+        },
+        /**
+         * Recover suggestions popup on focus
+         */
+        handleSuggestionsPopupFocus(e) {
+            if (this.verboseDebugLogging) {
+                // eslint-disable-next-line no-console
+                console.log("focus", e, JSON.stringify(this.suggestionsData))
+            }
+            if (this.suggestionsData?.blurred) {
+                this.suggestionsData.blurred = false
+            }
+        },
+        /**
+         * Cancel selection if input gets blurred
+         */
+        handleSuggestionsPopupBlur(e) {
+            if (this.verboseDebugLogging) {
+                // eslint-disable-next-line no-console
+                console.log("blur", e, JSON.stringify(this.suggestionsData))
+            }
+            if (!this.suggestionsPopupVisible || !this.$refs.suggestionsPopup) {
+                return
+            }
+
+            // Get reference to the popup
+            // There is only ever one at a time, but if it's defined in a v-for
+            // the reference will be an array of one
+            const $suggestionsPopup = Array.isArray(this.$refs.suggestionsPopup)
+                ? this.$refs.suggestionsPopup[0].$el
+                : this.$refs.suggestionsPopup.$el
+
+            // Do not cancel suggestions if the new focused element (e.relatedTarget)
+            // is a child of the suggestions popup
+            // That is the case when clicking an option in the suggestions popup,
+            // and cancelling too early prevents the option from being properly selected
+            if ($suggestionsPopup.contains(e.relatedTarget)) {
+                return
+            }
+            this.suggestionsData.blurred = true
+        },
+        /**
+         * Cancel the popup if the mouse is used to change the caret position
+         */
+        handleSuggestionsPopupMouseUp() {
+            if (!this.suggestionsPopupVisible) return
+
+            const { caretIndex, field } = this.suggestionsData
+            if (caretIndex !== field.selectionStart) {
+                this.handleSuggestionsPopupCancel()
+            }
+        },
+        /**
+         * Cancel the suggestions popup by setting the data object to null
+         */
+        handleSuggestionsPopupCancel() {
+            this.suggestionsData = null
+        },
+    },
+    computed: {
+        suggestionsPopupVisible() {
+            return (
+                this.suggestionsData !== null && !this.suggestionsData.blurred
+            )
+        },
+        filteredSuggestionOptions() {
+            const { searchText } = this.suggestionsData
+
+            return this.suggestionOptions.filter(
+                (option) =>
+                    searchText === "" ||
+                    option.title
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase())
+            )
+        },
+    },
+    data() {
+        return {
+            suggestionsData: null,
+        }
+    },
+    props: {
+        suggestionOptions: {
+            type: Array,
+        },
+    },
+    mounted() {
+        this.$on("suggestions-selected", (opt) => {
+            this.handleSuggestionsPopupSelected(opt.recipe_id)
+        })
+    },
+}
+
+export default {
+    name: "SuggestionsPopup",
+    props: {
+        options: {
+            type: Array,
+            required: true,
+        },
+        focusIndex: {
+            type: Number,
+            required: true,
+        },
+        searchText: {
+            type: String,
+            required: true,
+        },
+        field: {
+            type: HTMLElement,
+            required: true,
+        },
+        caretPos: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        offset() {
+            const { caretPos, field } = this
+
+            return {
+                left: Math.min(
+                    field.offsetLeft + caretPos.left,
+                    field.offsetLeft +
+                        field.offsetWidth -
+                        SUGGESTIONS_POPUP_WIDTH
+                ),
+                top: field.offsetTop + caretPos.top + caretPos.height,
+            }
+        },
+    },
+    watch: {
+        /**
+         * Scroll to centre the focused element in the parent when it changes
+         * (with arrow keys, for example)
+         */
+        focusIndex(focusIndex) {
+            const parentHeight = this.$refs.scroller.offsetHeight
+            const childHeight = this.$refs.scroller.children[0].offsetHeight
+
+            // Get the scroll position of the top of the focused element
+            const focusedChildTop = childHeight * focusIndex
+            // Get the centre
+            const focusedChildMiddle = focusedChildTop + childHeight / 2
+            // Offset to centre in the parent scrolling element
+            const parentMiddle = focusedChildMiddle - parentHeight / 2
+
+            // Scroll to that position
+            this.$refs.scroller.scrollTo(0, parentMiddle)
+        },
+    },
+    created() {
+        this.width = SUGGESTIONS_POPUP_WIDTH
+    },
+    mounted() {
+        this.$refs.scroller.scrollTo(0, 0)
+    },
+    methods: {
+        handleClick(e) {
+            e.preventDefault()
+            e.stopPropagation()
+            this.$parent.$emit("suggestions-selected", {
+                recipe_id: e.target.getAttribute("data-id"),
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+.suggestions-popup {
+    position: absolute;
+    z-index: 2;
+    overflow: hidden;
+    border: 1px solid var(--color-background-darker);
+    background-color: var(--color-main-background);
+    border-radius: 5px;
+}
+
+.scroller {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.item:not(:last-child) {
+    border-bottom: 1px solid var(--color-background-darker);
+}
+
+.link {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    padding: 0.2rem 0.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.link:hover,
+.focused > .link {
+    background-color: var(--color-primary);
+    color: var(--color-primary-text);
+}
+
+@media (max-width: 400px) {
+    .suggestions-popup {
+        left: 0 !important;
+        width: 100% !important;
+    }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 68cb99092..bf72c48b1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,6 +37,9 @@ window.escapeHTML = helpers.escapeHTML
 Vue.prototype.$window = window
 Vue.prototype.OC = OC
 
+// eslint-disable-next-line no-undef
+Vue.prototype.verboseDebugLogging = verboseDebugLogging
+
 // Markdown for Vue
 Vue.use(VueShowdown, {
     // set default flavor for Markdown
diff --git a/webpack.config.js b/webpack.config.js
index 99507f104..2eeea9c77 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,9 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const { merge } = require('webpack-merge')
-const { env } = require('process')
+
+const buildMode = process.env.NODE_ENV
+const isDev = buildMode === 'development'
 
 function cookbookConfig (env) {
     const config = merge(webpackConfig, {
@@ -25,6 +27,7 @@ function cookbookConfig (env) {
             new CleanWebpackPlugin(),
             new webpack.DefinePlugin({
                 '__webpack_use_dev_server__': env.dev_server || false,
+                'verboseDebugLogging': isDev && (process.env.VERBOSE || false),
             }),
         ],
         resolve: {