Fix .tsmb-icon-close to not rely on inline style attribute

This makes the web component compatible with a stict CSP setting, without granting `style-src unsafe-inline`, and without hardcoding a hash of the exact `display: none;` value.
jquery · Aug 22, 2024 · 54afc52 · 54afc52
1 parent 865654e
commit 54afc52
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/typesense-minibar.css b/typesense-minibar.css
@@ -117,8 +117,8 @@ typesense-minibar form::before {
   cursor: pointer;
 }
 
-.tsmb-form--open .tsmb-icon-close {
-  display: block !important;
+form:not(.tsmb-form--open) .tsmb-icon-close {
+  display: none;
 }
 
 .tsmb-form--slash:not(.tsmb-form--open):not(:focus-within)::after {

diff --git a/typesense-minibar.js b/typesense-minibar.js
@@ -74,7 +74,7 @@ globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
   form.addEventListener('submit', function (e) {
     e.preventDefault();
   });
-  form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" tabindex="-1" class="tsmb-icon-close" style="display: none;"><path d="M9 3L3 9M3 3L9 9"/></svg>');
+  form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" tabindex="-1" class="tsmb-icon-close"><path d="M9 3L3 9M3 3L9 9"/></svg>');
   form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
     input.value = '';
     state.hits = [];