ment.io: ment.io inside directive, inside directive, fails randomly on scope get context, or scope issue and cannot select items

Hi Jeff, I am about to start my own implementation because I cannot seem to make it work. Yesterday 2 am seem to work with scope:false but this morning I get in and again is not working, I think it could be something of an initialization issue. I’m hard refreshing my browser to test. Let me give you the works:

I have removed non essential code.

This is the directive that has mentio within its template. The functions for

app.directive('shareContent', ['Application', 'Users', 'Shares', 'Analyze', function (Application, Users, Shares, Analyze) {
    return {
      restrict: 'E',
      replace: true,
      scope: false,
      templateUrl: 'templates/directives/share-content.html',
      controller: ['$scope', function ($scope) {
          var self = this;
          self.users = [];
          $scope.typedTerm = 'hey';
          self.share = function () {
              ....
          };
          $scope.mentionUser = function (user) {
            var htmlUserTag = '<div id="' + user._id + '" class="ui image label">' + user.full_name + '</div>';
            return htmlUserTag;
          };
          $scope.searchUsers = function (term) {
            if (term.length < 3) {
              return;
            }
            self.loadingUsers = true;
            Users.find({....}, function (users) {
              self.users = users;
              self.loadingUsers = false;
            }, function (error) {
              console.log('Error getting users.');
              self.loadingUsers = false;
            });
          };
  }]);

And the directive’s template with ment.io is

    <div class="ui form">
      <div id="sharesArea" autocomplete="off" contenteditable="true" mentio="true" mentio-typed-term="typedTerm" mentio-macros="macros" mentio-require-leading-space="true" mentio-select-not-found="true" mentio-id="'sharesArea'" ng-model="share.shares" class="shares-container" style=""></div>
      <mentio-menu mentio-for="'sharesArea'" mentio-trigger-char="'@'" mentio-items="share.users" mentio-template-url="templates/directives/user-mentions-list.html" mentio-search="searchUsers(term)" mentio-select="mentionUser(item)"></mentio-menu>
      <span class="ui divider"></span>
      <button class="ui fluid center aligned primary button" ng-click="share.share()">Send</button>
    </div>

As I mentioned above I had this working at 2AM but this morning it stopped working. While I was refreshing to get the errors and paste them here it started working again, it must be an initialization thing, a loading thing. Occurring sometimes at different sequences.

The first indication of the error is that when you ARROW UP or DOWN you see an apparent skip of one element (First element jumps to the third and so on). This is only apparent but when you break and debug you see that there are are actually like two rounds of handling DOWN arrow.

Then when you click or enter on one. I get an error in:

       function selectElement (ctx, targetElement, path, offset) {
            var range;
            var elem = targetElement;
            if (path) {
                for (var i = 0; i < path.length; i++) {
                    elem = elem.childNodes[path[i]];
                    if (elem === undefined) {
                        return;
                    }
                    while (elem.length < offset) {
                        offset -= elem.length;
                        elem = elem.nextSibling;
                    }
                    if (elem.childNodes.length === 0 && !elem.length) {
                        elem = elem.previousSibling;
                    }
                }
            }
            var sel = getWindowSelection(ctx);

            range = getDocument(ctx).createRange();
            range.setStart(elem, offset);
            range.setEnd(elem, offset);
            range.collapse(true);
            try{sel.removeAllRanges();}catch(error){}
            sel.addRange(range);
            targetElement.focus();
        }

Where ctx is undefined.

Now again it is working. And Yesterday to make it work I had to put the directive’s scope property to false. I am not 100% certain that this is what actually causes it to work sometimes.

I’m starting to think that perhaps sometimes the directive with the ment.io which is contained by another directive might be initialized first and hence skip to the controller’s scope.

I’m citing all speculations. Another issue that I’ve seen is that scope.getContext() which I think might be what it is passed as ctx returns undefined.

The markup for the menu items is the standard. All functions get called, but I have an issue with the scopes I guess.

horizontal-bar contains share-content which has a contenteditable div and holds the ment.io directive (contenteditable also standard)

The code for horizontal menubar is the following (Almost empty), no scope property set

app.directive('horizontalMenubar', ['Application', function (Application) {
    return {
      restrict: 'E',
      templateUrl: 'templates/directives/horizontal-menubar.html',
      controller: function () {
        var self = this;
      },
      controllerAs: 'hmenu'
    };
  }]);

Please if you can help me out I would definitely appreciate it.

Browser, latest Chrome Ment.io latest (0.9.23)

The error on Enter / Select a user from the list

Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

at line range.collapse(true); of function function selectElement (ctx, targetElement, path, offset) {