improve styling

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;
+  padding: 0.2rem 0.5rem;
-  color: black;
-  padding: 0.5rem;
 
-  &.is-selected {
+  &.is-selected,
-    background: #ccc;
+  &:hover {
+    color: black;
+    background: rgba(black, 0.1);
   }
 }
 </style>

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

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 }) || false
-        return testRenderer?.onKeyDown?.({ view, event, range })
       },
 
       // Setup decorator on the currently active suggestion.