Fixes for allow spaces (#162)

* hide Tribute menu if allow spaces = false and inserting a space while menu is open * add positionMenu?: boolean
zurb · Nov 13, 2018 · 8b42cc9 · 8b42cc9
1 parent bfa3ba7
commit 8b42cc9
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 9 deletions.
diff --git a/dist/tribute.js b/dist/tribute.js
diff --git a/dist/tribute.min.js.map b/dist/tribute.min.js.map
diff --git a/src/Tribute.js b/src/Tribute.js
@@ -31,6 +31,7 @@ class Tribute {
         this.allowSpaces = allowSpaces
         this.replaceTextSuffix = replaceTextSuffix
         this.positionMenu = positionMenu
+        this.hasTrailingSpace = false;
 
         if (values) {
             this.collection = [{

diff --git a/src/TributeEvents.js b/src/TributeEvents.js
@@ -104,6 +104,13 @@ class TributeEvents {
 
         if (event.keyCode === 27) return
 
+        if (!instance.tribute.allowSpaces && instance.tribute.hasTrailingSpace) {
+            instance.tribute.hasTrailingSpace = false;
+            instance.commandEvent = true;
+            instance.callbacks()["space"](event, this);
+            return
+        }
+
         if (!instance.tribute.isActive) {
             let keyCode = instance.getKeyCode(instance, this, event)
 
@@ -142,7 +149,7 @@ class TributeEvents {
     getKeyCode(instance, el, event) {
         let char
         let tribute = instance.tribute
-        let info = tribute.range.getTriggerInfo(false, false, true, tribute.allowSpaces)
+        let info = tribute.range.getTriggerInfo(false, tribute.hasTrailingSpace, true, tribute.allowSpaces)
 
         if (info) {
             return info.mentionTriggerChar.charCodeAt(0)
@@ -153,7 +160,7 @@ class TributeEvents {
 
     updateSelection(el) {
         this.tribute.current.element = el
-        let info = this.tribute.range.getTriggerInfo(false, false, true, this.tribute.allowSpaces)
+        let info = this.tribute.range.getTriggerInfo(false, this.tribute.hasTrailingSpace, true, this.tribute.allowSpaces)
 
         if (info) {
             this.tribute.current.selectedPath = info.mentionSelectedPath
@@ -198,6 +205,15 @@ class TributeEvents {
                 // choose first match
                 this.callbacks().enter(e, el)
             },
+            space: (e, el) => {
+                if (this.tribute.isActive && !this.tribute.allowSpaces) {
+                    e.stopPropagation();
+                    setTimeout(() => {
+                        this.tribute.hideMenu();
+                        this.tribute.isActive = false;
+                    }, 0);
+                }
+            },
             up: (e, el) => {
                 // navigate up ul
                 if (this.tribute.isActive) {

diff --git a/src/TributeRange.js b/src/TributeRange.js
@@ -22,7 +22,7 @@ class TributeRange {
         let context = this.tribute.current,
             coordinates
 
-        let info = this.getTriggerInfo(false, false, true, this.tribute.allowSpaces)
+        let info = this.getTriggerInfo(false, this.tribute.hasTrailingSpace, true, this.tribute.allowSpaces)
 
         if (typeof info !== 'undefined') {
 
@@ -333,6 +333,8 @@ class TributeRange {
 
                 let regex = allowSpaces ? /[^\S ]/g : /[\xA0\s]/g;
 
+                this.tribute.hasTrailingSpace = regex.test(currentTriggerSnippet);
+
                 if (!leadingSpace && (menuAlreadyActive || !(regex.test(currentTriggerSnippet)))) {
                     return {
                         mentionPosition: mostRecentTriggerCharPos,

diff --git a/tributejs.d.ts b/tributejs.d.ts
@@ -50,6 +50,9 @@ export type TributeCollection<T extends {}> = {
   // optionally specify a custom suffix for the replace text
   // (defaults to empty space if undefined)
   replaceTextSuffix?: string
+
+  //specify whether the menu should be positioned
+  positionMenu?: boolean
 }
 
 export type TributeOptions<T> = TributeCollection<T> | {