Fixed; TODO add to tests: Autocomplete popup not clickable #174
Description
For this code:
<!DOCTYPE html>
<html>
<body>
<!--Prism-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css"></link>
<!--code-input-->
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.css">
<!--Import-->
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/plugins/autocomplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/plugins/autocomplete.min.css">
<script>
// Create a function for autocompletion
var tags = ["!DOCTYPE html", "html", "head", "body", "title", "style", "script", "link", "meta", "h1", "h2", "h3", "h4", "h5", "h6", "em", "strong", "span", "section", "aside", "article", "div", "nav", "main", "ul", "ol", "li", "code-input"];
function updatePopup(popupElem, textarea, caretPos) {
// Takes in
// popupElem: an element under the caret which can be filled
// with autocompletion suggestion elements
// textarea: the editing element inside the code-input element
// (get the code-input element using textarea.parentElement; passed
// in for backwards compatibility)
// caretPos: the character index of the caret (typing cursor) in the
// contents
console.log(popupElem);
let list_ends_on_start_tag = textarea.value.substring(0, caretPos).split("<");
let start_tag = list_ends_on_start_tag[list_ends_on_start_tag.length-1];
if(start_tag[0] == "/") start_tag = start_tag.substr(1);
if(start_tag == "" || start_tag.includes(" ") || start_tag.includes(">")) {
popupElem.innerHTML = "";
return;
}
popupElem.innerText = "";
tags.forEach((tag) => {
if(tag.substring(0, start_tag.length) == start_tag) {
console.log(tag, tag.substring(0, start_tag.length));
let autocompleteButton = document.createElement("button");
autocompleteButton.innerHTML = "<i>" + tag.substring(0, start_tag.length) + "</i>" + tag.substring(start_tag.length, tag.length);
autocompleteButton.addEventListener("click", () => {
console.log("!!!")
textarea.focus();
document.execCommand("insertText", false, tag.substring(start_tag.length, tag.length));
popupElem.innerHTML = ""; // On popup
});
popupElem.appendChild(autocompleteButton);
}
});
if(popupElem.firstElementChild != null) {
popupElem.firstElementChild.innerHTML += "[Tab]";
}
textarea.addEventListener("keydown", (event) => {
if(event.key == "Tab" && popupElem.firstElementChild != null) {
popupElem.firstElementChild.click();
event.preventDefault();
}
})
}
// Pass at register
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [
new codeInput.plugins.Autocomplete(updatePopup) // See above
]));
</script>
<p>Start typing some HTML tags to see the autocomplete in action. You can click an autocomplete suggestion, or press the Tab key to select the first.</p>
<code-input lang="HTML"></code-input>
</body>
</html>
It is because the autocomplete popup gets the HTML attribute inert?