Fix prevActiveNotes race condition, and don't add 'active' style to disabled piano keys

src/Keyboard.js

@@ -68,7 +68,7 @@ class Keyboard extends React.Component {
       >
         {this.getMidiNumbers().map((midiNumber) => {
           const { note, isAccidental } = MidiNumbers.getAttributes(midiNumber);
-          const isActive = this.props.activeNotes.includes(midiNumber);
+          const isActive = !this.props.disabled && this.props.activeNotes.includes(midiNumber);
           return (
             <Key
               naturalKeyWidth={naturalKeyWidth}

src/Piano.js

@@ -44,10 +44,13 @@ class Piano extends React.Component {
   }
 
   handlePlayNoteInput = (midiNumber) => {
-    if (this.props.onPlayNoteInput) {
-      this.props.onPlayNoteInput(midiNumber, { prevActiveNotes: this.state.activeNotes });
-    }
     this.setState((prevState) => {
+      // Need to be handled inside setState in order to set prevActiveNotes without
+      // race conditions.
+      if (this.props.onPlayNoteInput) {
+        this.props.onPlayNoteInput(midiNumber, { prevActiveNotes: prevState.activeNotes });
+      }
+
       // Don't append note to activeNotes if it's already present
       if (prevState.activeNotes.includes(midiNumber)) {
         return null;
@@ -59,12 +62,16 @@ class Piano extends React.Component {
   };
 
   handleStopNoteInput = (midiNumber) => {
-    if (this.props.onStopNoteInput) {
-      this.props.onStopNoteInput(midiNumber, { prevActiveNotes: this.state.activeNotes });
-    }
-    this.setState((prevState) => ({
-      activeNotes: prevState.activeNotes.filter((note) => midiNumber !== note),
-    }));
+    this.setState((prevState) => {
+      // Need to be handled inside setState in order to set prevActiveNotes without
+      // race conditions.
+      if (this.props.onStopNoteInput) {
+        this.props.onStopNoteInput(midiNumber, { prevActiveNotes: this.state.activeNotes });
+      }
+      return {
+        activeNotes: prevState.activeNotes.filter((note) => midiNumber !== note),
+      };
+    });
   };
 
   render() {

src/styles.css

@@ -72,10 +72,6 @@
 /*
  * Styles for disabled state
  */
-.ReactPiano__Key--disabled.ReactPiano__Key {
-  cursor: progress;
-}
-
 .ReactPiano__Key--disabled.ReactPiano__Key--accidental {
   background: #ddd;
   border: 1px solid #999;