From dd3a2ce49017de8ba27978fe87dd049b05415746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 16:54:02 +0100
Subject: [PATCH] improve styling

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 19 ++++++++++++++-----
 docs/src/demos/Nodes/Mention/index.vue       |  2 +-
 packages/suggestion/src/suggestion.ts        |  3 +--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 09ae201e3..6812eef29 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -74,14 +74,23 @@ export default {
 <style lang="scss" scoped>
 .items {
   position: relative;
+  border-radius: 0.25rem;
+  background: white;
+  color: rgba(black, 0.8);
+  overflow: hidden;
+  font-size: 0.9rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
 }
 .item {
-  background: white;
-  color: black;
-  padding: 0.5rem;
+  padding: 0.2rem 0.5rem;
 
-  &.is-selected {
-    background: #ccc;
+  &.is-selected,
+  &:hover {
+    color: black;
+    background: rgba(black, 0.1);
   }
 }
 </style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index de380edcb..4587ba054 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -32,7 +32,7 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            return ['foo', 'bar'].filter(item => item.startsWith(query))
+            return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
           },
           renderer: () => {
             let component
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index baa0898c2..9f5536062 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -178,8 +178,7 @@ export function Suggestion({
           return false
         }
 
-        // return onKeyDown({ view, event, range })
-        return testRenderer?.onKeyDown?.({ view, event, range })
+        return testRenderer?.onKeyDown?.({ view, event, range }) || false
       },
 
       // Setup decorator on the currently active suggestion.