1 files changed, 21 insertions, 8 deletions

diff --git a/string.mjs b/string.mjs
index 39a3533..e8c32a7 100644
--- a/string.mjs
+++ b/string.mjs
@@ -59,22 +59,40 @@ export default class extends HTMLElement {
         });
     }
 
+    deselectInputs() {
+        this.querySelectorAll('input[slot="fret"]').forEach(i => {
+            console.debug('desecl inputs', i);
+            i.checked = false
+        });
+    }
+
     muteClicked(e) {
         console.debug('String#muteClicked', this, e);
         if (this.getAttribute('value') !== 'x') {
             this.setAttribute('value', 'x');
             this.classList.add('muted');
+            this.deselectInputs();
         } else {
             this.setAttribute('value', this.getAttribute('tonic'));
             this.classList.remove('muted');
         }
+
+        this.updateSelected();
     }
 
     fretClicked(e) {
         console.debug('String#fretClicked', this, e);
         console.debug(' -- note', e.target.note);
-        this.setAttribute('value', e.target.getAttribute('value'));
-        this.setAttribute('octave', e.target.getAttribute('octave'));
+        const [v, o] = ['value', 'octave'].map(attr => e.target.getAttribute(attr));
+
+        // if the open ‘fret’ was clicked, deselect any previously
+        // selected frets because it won't be done automatically, as
+        // the open position isn't in the dom as a radio input.
+        if (v == this.getAttribute('tonic') && o == this.getAttribute('tonic-octave')) {
+            this.querySelectorAll('input[type="radio"]').forEach(inp => inp.checked = false);
+        }
+        this.setAttribute('value', v);
+        this.setAttribute('octave', o);
         this.updateSelected();
     }
 
@@ -121,11 +139,6 @@ export default class extends HTMLElement {
             })
             tmpl.parentNode.insertBefore(item, tmpl);
         }
-
-        this.querySelectorAll('slot[name="selected"]').forEach(s => {
-            const note = this.getAttribute('value');
-            console.debug(' -- setting selected', note);
-            s.textContent = note;
-        })
+        this.updateSelected();
     }
 }