将插入符号（光标）放在特定字段中的特定位置 - 单击期间出现问题

Question

这是我面临的一个奇怪问题。

我有一个contenteditable字段，并为其添加了主题标签的自动填充功能。当用户开始键入主题标签时，他们会看到一个包含自动填充建议的弹出框，如下所示：

用户可以使用键盘（使用向上/向下箭头选择它并按Enter键）或单击它来插入建议的＃标签。将插入主题标签，并使用以下函数将光标放在主题标签的末尾：

/*
 * The function takes a DOM node and the desired caret position
*/
var setCaretPosition = function(node, position) {
    node.focus();
    var textNode = node.firstChild;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(textNode, position);
    range.setEnd(textNode, position);
    sel.removeAllRanges();
    sel.addRange(range);
};

现在，这是我的问题。如果用户通过键盘选择＃标签，则上述功能正常工作（使用箭头并按Enter键）。但是，如果用户点击了主题标签，则会插入主题标签，但焦点会从文本编辑字段中丢失。

我逐步完成了调试器并验证了我试图关注的DOM元素并将游标设置为两个场景中的相同元素。但是，点击主题标签仍然会失去对编辑字段的关注。我完全不知道为什么会发生这种情况。也许你可以提出任何建议？

更新：嗯，我的代码中一定犯了一些错误，因为我在Codepen中创建的simple example工作正常。

Answer 1

在无数次重新阅读我的代码之后，我意识到当我点击它时，我在主题标签上的mousedown事件中调用stopPropagation，而不是preventDefault。因此，我的文本领域失去了焦点也就不足为奇了。我仍然觉得有点令人费解的是它没有使用我的问题中包含的代码片段进行恢复，但也许那是因为我正在听标签上的mousedown事件和焦点，即使它已恢复到一段时间的文本字段再次丢失。