Updated templates file to allow select mode to have focus when bein…

…g "Tabbed" into, by giving the tag's text node a `contenteditable` which makes it recieves focus
yairEO · Mar 16, 2024 · aca03a0 · aca03a0
1 parent 524c79f
commit aca03a0
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/parts/templates.js b/src/parts/templates.js
@@ -27,9 +27,9 @@ export default {
                     tabIndex="${_s.a11y.focusableTags ? 0 : -1}"
                     class="${_s.classNames.tag} ${tagData.class || ""}"
                     ${this.getAttributes(tagData)}>
-            <x title='' class="${_s.classNames.tagX}" role='button' aria-label='remove tag'></x>
+            <x title='' tabIndex="${_s.a11y.focusableTags ? 0 : -1}" class="${_s.classNames.tagX}" role='button' aria-label='remove tag'></x>
             <div>
-                <span class="${_s.classNames.tagText}">${tagData[_s.tagTextProp] || tagData.value}</span>
+                <span ${_s.mode === 'select' ? "contenteditable='true'" : ''} class="${_s.classNames.tagText}">${tagData[_s.tagTextProp] || tagData.value}</span>
             </div>
         </tag>`
     },