Quick Reblog: Reimplement tag suggestion UI

src/content_scripts/suggestion_list.css

@@ -0,0 +1,46 @@
+.xkit-suggestion-list {
+  position: absolute;
+  z-index: 1;
+  max-width: 250px;
+  margin: 7px;
+  padding: 2px;
+
+  border-radius: 4px;
+  color: rgb(var(--black), 0.65);
+  background-color: rgb(var(--white));
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .5);
+}
+
+.xkit-suggestion-list::before {
+  position: absolute;
+  bottom: 100%;
+  left: 10px;
+
+  content: '';
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid rgb(var(--white));
+}
+
+.xkit-suggestion-list > div {
+  max-height: 250px;
+  overflow-y: scroll;
+}
+
+.xkit-suggestion-list button {
+  padding: 0.75ch 1ch;
+  padding-right: calc(1ch + 1em + 1ch);
+  max-width: 100%;
+
+  justify-content: unset !important;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+:not(:focus, :focus-within) > .xkit-suggestion-list {
+  display: none;
+}
+
+.xkit-suggestion-list:empty {
+  display: none;
+}

src/features/quick_reblog.css

@@ -4,7 +4,6 @@
   box-shadow: 0 0 15px 0 rgba(0,0,0,.5);
   padding: 2px;
   border-radius: 3px;
-  overflow: hidden;
   color: rgb(var(--black));
   font-size: .875rem;
   font-weight: normal;
@@ -140,6 +139,11 @@ div:first-child + span + #quick-reblog,
   line-height: 1;
 }
 
+#quick-reblog .tags-input-wrapper > input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 #quick-reblog .action-buttons {
   display: flex;
   flex-direction: row;

src/features/quick_reblog.js

@@ -31,20 +31,20 @@ const tagsInput = dom(
   'input',
   {
     placeholder: 'Tags (comma separated)',
-    autocomplete: 'off',
-    list: 'quick-reblog-tag-suggestions'
+    autocomplete: 'off'
   },
   { keydown: event => event.stopPropagation() }
 );
-const tagSuggestions = dom('datalist', { id: 'quick-reblog-tag-suggestions' });
+const tagSuggestions = dom('div', { class: 'xkit-suggestion-list' });
+const tagsInputWrapper = dom('div', { class: 'tags-input-wrapper' }, null, [tagsInput, tagSuggestions]);
 const actionButtons = dom('fieldset', { class: 'action-buttons' });
 const reblogButton = dom('button', null, null, ['Reblog']);
 reblogButton.dataset.state = 'published';
 const queueButton = dom('button', null, null, ['Queue']);
 queueButton.dataset.state = 'queue';
 const draftButton = dom('button', null, null, ['Draft']);
 draftButton.dataset.state = 'draft';
-[blogSelectorContainer, commentInput, quickTagsList, tagsInput, tagSuggestions, actionButtons].forEach(element => popupElement.appendChild(element));
+[blogSelectorContainer, commentInput, quickTagsList, tagsInputWrapper, actionButtons].forEach(element => popupElement.appendChild(element));
 
 let lastPostID;
 let timeoutID;
@@ -80,6 +80,15 @@ const onBlogSelectorChange = () => {
 };
 blogSelector.addEventListener('change', onBlogSelectorChange);
 
+tagSuggestions.addEventListener('click', event => {
+  if (event.target.dataset.value) {
+    const includeSpace = !tagsInput.value.endsWith(' ') && tagsInput.value.trim() !== '';
+    tagsInput.value += `${includeSpace ? ' ' : ''}${event.target.dataset.value}, `;
+    tagsInput.focus();
+    renderTagSuggestions();
+  }
+});
+
 const renderTagSuggestions = () => {
   tagSuggestions.textContent = '';
   if (!showTagSuggestions) return;
@@ -89,19 +98,21 @@ const renderTagSuggestions = () => {
     .map(tag => tag.trim().toLowerCase())
     .filter(tag => tag !== '');
 
-  const includeSpace = !tagsInput.value.endsWith(' ') && tagsInput.value.trim() !== '';
-
   const tagsToSuggest = suggestableTags
     .filter(tag => !currentTags.includes(tag.toLowerCase()))
-    .filter((tag, index, array) => array.indexOf(tag) === index)
-    .map(tag => `${tagsInput.value}${includeSpace ? ' ' : ''}${tag}`);
+    .filter((tag, index, array) => array.indexOf(tag) === index);
 
-  tagSuggestions.append(...tagsToSuggest.map(value => dom('option', { value })));
+  if (tagsToSuggest.length && (tagsInput.value.trim().endsWith(',') || tagsInput.value.trim() === '')) {
+    tagSuggestions.replaceChildren(
+      dom('div', null, null, tagsToSuggest.map(value => dom('button', { 'data-value': value }, null, [value])))
+    );
+    tagSuggestions.hidden = false;
+  }
 };
 
-const updateTagSuggestions = () => {
-  if (tagsInput.value.trim().endsWith(',') || tagsInput.value.trim() === '') {
-    renderTagSuggestions();
+const onInputKeyDown = ({ key }) => {
+  if (key === 'Escape') {
+    tagSuggestions.hidden = true;
   }
 };
 
@@ -124,7 +135,8 @@ const checkLength = ({ currentTarget }) => {
   }
 };
 
-tagsInput.addEventListener('input', updateTagSuggestions);
+tagsInput.addEventListener('input', renderTagSuggestions);
+tagsInput.addEventListener('keydown', onInputKeyDown);
 tagsInput.addEventListener('input', doSmartQuotes);
 tagsInput.addEventListener('input', checkLength);
 

src/manifest.json

@@ -62,7 +62,8 @@
         "content_scripts/sidebar.css",
         "content_scripts/modals.css",
         "content_scripts/notifications.css",
-        "content_scripts/post_actions.css"
+        "content_scripts/post_actions.css",
+        "content_scripts/suggestion_list.css"
       ]
     }
   ],