There were a few important things
.addEventListener()
The function that you want to add needs to be assigned with an arrow function. Otherwise it just gets executed rather than being mapped to the event. Took me a while to figure out.
Also adding a toggle as the event can backfire on you if the function toggles itself. Self explanatory I guess but I threw myself for a few loops that were not necessary.
.preventDefault()
<details> and <summary> tags have a default action. If you have a text input field within them, you find that the spacebar will toggle the details. The onKeyUp event and the .key function helped me get around this. (I had to do a bit of wrangling to get it to work in the WordPress block but I got there)
I Like JetBrainsMono
Its a fun font and I may try and implement it on this site at some point
I Don’t Fully Understand How Gutenberg Blocks Store Boolean Values
I just don’t.
Onward to my simple table of contents.