Merge pull request #892 from MarcelRobitaille/fix-ui-glitch-empty-keywords

Fix the UI glitch when keywords are empty (#857)

Author: christianlupus

CHANGELOG.md

@@ -19,6 +19,8 @@
   [#886](https://github.com/nextcloud/cookbook/pull/886) @MarcelRobitaille
 - Make height of control header dependant on server CSS variable
   [#897](https://github.com/nextcloud/cookbook/pull/897) @MarcelRobitaille
+- Fix UI glitch when keyword list is empty
+  [#892](https://github.com/nextcloud/cookbook/pull/892) @MarcelRobitaille
 
 ### Documentation
 - Added clarification between categories and keywords for users

src/components/RecipeEdit.vue

@@ -667,7 +667,14 @@ export default {
                     paddedTime: this.recipe.totalTime,
                 }
 
-                this.selectedKeywords = this.recipe.keywords.split(",")
+                this.selectedKeywords = this.recipe.keywords
+                    .split(",")
+                    .map((kw) => kw.trim())
+                    // Remove any empty keywords
+                    // If the response from the server is just an empty
+                    // string, split will create an array of a single empty
+                    // string
+                    .filter((kw) => kw !== "")
 
                 // fallback if fetching all keywords fails
                 this.selectedKeywords.forEach((kw) => {