How to prevent the html details element from toggling when the summary has an embedded text input and user presses space bar

I have a text input within the summary tag of a details element which is in the open state. The intention is to capture user input which will eventually be displayed as a details element (see below). However the details element toggles when the user presses the space bar while entering text. I want to prevent this. I expected that this could be done using stopPropagation in the keypress event but it does not seem to be working. How do I prevent the element from toggling?

window.onload = function() {
  var summary = document.getElementById("x");
  var fn = function(e) {
    e.stopPropagation();
    /*if(e.keyCode == 32){
      e.preventDefault();
      e.target.value += ""
    } */
  };
  summary.onkeypress = fn;
  //summary.onkeydown = fn;
};

<details open><summary><input id="x" type="text" /></summary>
  Some content</details>

I need to do this within a React component but I'm posting a js/html example here for simplicity.

One alternative is to use preventDefault onkeypress when space is entered and manually concatenate the space char but this seems inelegant