I have an accordion component in a React app using react-bootstrap. In the AccordianHeader component I have a text input. Whenever I release the spacebar of the text input the accordion expands or collapses. I had a similar issue where clicking the input would also expand or contract the accordion but was able to fix this by adding onClick={(e) => e.stopPropagation()} to the input.
The expansion/collapse seems to happen on the keyUp event (if I hold the spacebar down so that it makes more than one space the action only occurs when I let go of the spacebar). However, adding onKeyUp={(e) => e.stopPropagation()} does not fix the issue. I have also tried adding preventDefault() on the input keyUp event without success. Is there some other event that is being triggered when the spacebar is released that I need to handle with stopPropagation() or preventDefault()?
Answering my own question - adding preventDefault() on the onKeyUp event of the input does in fact prevent the expansion/collapse of the accordion when pressing the space bar. I had been getting the syntax incorrect when implementing it and when I went back to review discovered that this solution works. Just posting here for anyone in the future who may have the same issue.
One additional helpful thing was using the console in Chrome dev tools. I used the command monitorEvents(document.getElementById(ID-OF-MY-INPUT)) and was able to see all of the events that were triggered when typing in the input. This helped me determine that there were not any events triggering that I was not aware of, which caused me to go back and re-examine my initial attempts.