1 files changed, 17 insertions, 3 deletions

diff --git a/string.mjs b/string.mjs
index e8c32a7..2e496be 100644
--- a/string.mjs
+++ b/string.mjs
@@ -82,14 +82,28 @@ export default class extends HTMLElement {
 
     fretClicked(e) {
         console.debug('String#fretClicked', this, e);
-        console.debug(' -- note', e.target.note);
-        const [v, o] = ['value', 'octave'].map(attr => e.target.getAttribute(attr));
+        if (this.getAttribute('value') === 'x') {
+            console.log(' -- val', this.getAttribute('value'));
+            e.preventDefault();
+            return;
+        }
+
+        // not sure why sometimes the input is selected and sometimes
+        // its parent.
+        let inp = e.target;
+        if (!inp.getAttribute('value')) {
+            // if the parent was clicked outside the input, select the
+            // input manually.
+            inp = inp.querySelector('input');
+            inp.checked = true;
+        }
+        const [v, o] = ['value', 'octave'].map(attr => inp.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.querySelectorAll('input[type="radio"]').forEach(i => i.checked = false);
         }
         this.setAttribute('value', v);
         this.setAttribute('octave', o);