[fix] list

webapp/static/clients/codemirror/grail.html

@@ -166,6 +166,21 @@
         </form>
     </dialog>
 
+ <dialog id="popHelp" popover>
+        <form>
+            <header>Help
+                <button type="button" class="btn-close"  aria-label="Close"
+                 onclick="$('popHelp').hidePopover(); "></button>
+            </header>
+            <div id=popHelpInfo" class="modal-body">
+                TODO
+            </div>
+            <div class="modal-footer">
+                
+            </div>
+        </form>
+    </dialog>
+
     <!--  <popup-info id="popHelp">hhhh</popup-info> -->
 
     <dialog id="popSettings" popover>

webapp/static/clients/codemirror/list.js

@@ -30,21 +30,9 @@ class ListComponent extends HTMLElement {
     get data() {
         return this.#data;
     }
-
+    select(e) {
-    /* Render the list items #data */
+        this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
-    render() {
-        const list = document.createElement('ul');
-        list.style = "max-height:80cqh;overflow: auto;";
-        const shad = this.#shadow;
-        this.#data.forEach((item, index) => {
-            const listItem = document.createElement('li');
-            listItem.innerHTML = `<a href="#"><i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
-            <span>${item.name} - ${item.detail}</span></a>`;
-
-            listItem.addEventListener('click', function (e) {
-                shad.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
         e.currentTarget.className = 'selected';
-
         console.log('Item clicked:', item, listItem);
         // You can dispatch a custom event here if needed.
         this.dispatchEvent(new CustomEvent('itemSelected', {
@@ -52,7 +40,35 @@ class ListComponent extends HTMLElement {
             bubbles: true,
             composed: true
         }));
-            });
+
+    }
+    /* Render the list items #data */
+    render() {
+        const list = document.createElement('ul');
+        list.style = "max-height:80cqh;overflow: auto;";
+
+        const select = e => {
+            if(e.type ==="keyup" && !(e.key==="Enter" )) return;
+            this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
+            e.currentTarget.className = 'selected';
+            const i=e.currentTarget.getAttribute("data-index")
+            console.log('Item index clicked:', i);
+            // You can dispatch a custom event here if needed.
+            this.dispatchEvent(new CustomEvent('itemSelected', {
+                detail: i,
+                bubbles: true,
+                composed: true
+            }));
+        };
+        this.#data.forEach((item, index) => {
+            const listItem = document.createElement('li');
+            listItem.setAttribute("tabindex", "0")
+            listItem.setAttribute("data-index", index)
+            listItem.innerHTML = `<i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
+            <span >${item.name} - ${item.detail}</span>`;
+
+            listItem.addEventListener('click', select);
+             listItem.addEventListener('keyup', select);
             list.appendChild(listItem);
         });
 
@@ -60,10 +76,10 @@ class ListComponent extends HTMLElement {
         const style = document.createElement('style');
         style.textContent = `
       @import url("../codicon@0.0.40/codicon.css");  
-      ul { list-style-type: none; padding: 0; margin: 0; }
+      ul { list-style-type: none; padding:0;margin:0; }
-      li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
+      li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
-      li :not(.selected) :hover { background:  #ccc; }
+      li:hover { background-color:  #ccc; }
-      .selected {  background: lightgreen;}
+      .selected {  background-color: #0d6efd;color: #ffff;}
       i {vertical-align: middle;}
     `;
         this.#shadow.appendChild(style);