Merge multiple event handlers

Closes #767

Author: japgolly

core/src/main/scala/japgolly/scalajs/react/vdom/Attr.scala

@@ -67,15 +67,18 @@ object Attr {
   }
 
   final class Event[E[+x <: dom.Node] <: raw.SyntheticEvent[x]](name: String)
-      extends Generic[js.Function1[E[Nothing], Any]](name) {
+      extends Attr[js.Function1[E[Nothing], Unit]](name) {
 
     type Event = E[Nothing]
 
+    override def :=[A](a: A)(implicit t: ValueType[A, js.Function1[E[Nothing], Unit]]): TagMod =
+      TagMod.fn(b => t.fn(f => b.addEventHandler(name, f.asInstanceOf[js.Function1[js.Any, Unit]]), a))
+
     def -->[A: DomCallbackResult](callback: => CallbackTo[A]): TagMod =
       ==>(_ => callback)
 
     def ==>[A: DomCallbackResult](eventHandler: Event => CallbackTo[A]): TagMod =
-      :=(((e: Event) => eventHandler(e).runNow()): js.Function1[E[Nothing], Any])(ValueType.direct)
+      :=(((e: Event) => eventHandler(e).runNow()): js.Function1[E[Nothing], Unit])(ValueType.direct)
 
     def -->?[O[_]](callback: => O[Callback])(implicit o: OptionLike[O]): TagMod =
       this --> Callback(o.foreach(callback)(_.runNow()))

core/src/main/scala/japgolly/scalajs/react/vdom/Builder.scala

@@ -8,12 +8,13 @@ import scala.scalajs.js
 /** Mutable target for immutable VDOM constituents to compose.
   */
 trait Builder {
-  val addAttr        : (String, js.Any) => Unit
-  val addClassName   : js.Any           => Unit
-  val addStyle       : (String, js.Any) => Unit
-  val addStylesObject: js.Object        => Unit
-  val appendChild    : RawChild         => Unit
-  val setKey         : js.Any           => Unit
+  val addAttr        : (String, js.Any)                     => Unit
+  val addClassName   : js.Any                               => Unit
+  val addEventHandler: (String, js.Function1[js.Any, Unit]) => Unit
+  val addStyle       : (String, js.Any)                     => Unit
+  val addStylesObject: js.Object                            => Unit
+  val appendChild    : RawChild                             => Unit
+  val setKey         : js.Any                               => Unit
 
   final def addStyles(j: js.Any): Unit = {
     // Hack because Attr.ValueType.Fn takes a js.Any => Unit.
@@ -28,13 +29,18 @@ trait Builder {
 object Builder {
   type RawChild = raw.React.Node
 
-  def setObjectKeyValue(o: js.Object, k: String, v: js.Any): Unit =
+  @inline def setObjectKeyValue(o: js.Object, k: String, v: js.Any): Unit =
     o.asInstanceOf[js.Dynamic].updateDynamic(k)(v)
 
-  def nonEmptyObject[O <: js.Object](o: O): js.UndefOr[O] =
+  @inline def modObjectKeyValue[A <: js.Any](o: js.Object, k: String, v: js.UndefOr[A] => A): Unit = {
+    val cur = o.asInstanceOf[js.Dynamic].selectDynamic(k).asInstanceOf[js.UndefOr[A]]
+    o.asInstanceOf[js.Dynamic].updateDynamic(k)(v(cur))
+  }
+
+  @inline def nonEmptyObject[O <: js.Object](o: O): js.UndefOr[O] =
     if (js.Object.keys(o).length == 0) js.undefined else o
 
-  def nonEmptyJsArray[A](as: js.Array[A]): js.UndefOr[js.Array[A]] =
+  @inline def nonEmptyJsArray[A](as: js.Array[A]): js.UndefOr[js.Array[A]] =
     if (as.length == 0) js.undefined else as
 
   // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -73,6 +79,12 @@ object Builder {
     override val addClassName: js.Any => Unit =
       n => nonEmptyClassName = nonEmptyClassName.fold(n)(_.toString + " " + n)
 
+    override val addEventHandler =
+      (k, g) => modObjectKeyValue[js.Function1[js.Any, Unit]](
+        props,
+        k,
+        c => if (c.isEmpty) g else {val f = c.get; e => {f(e); g(e)}})
+
     override val addStyle: (String, js.Any) => Unit =
       setObjectKeyValue(styles, _, _)
 

doc/changelog/1.7.5.md

@@ -0,0 +1,12 @@
+# 1.7.5
+
+* Multiple event handlers are now run in sequence, rather than the latest overriding the previous.
+
+  Example:
+
+  ```scala
+  <.input(
+    ^.onKeyDown ==> handler1,
+    ^.onKeyDown ==> handler2,
+  ```
+

test/src/test/scala/japgolly/scalajs/react/core/vdom/VdomTest.scala

@@ -4,6 +4,8 @@ import japgolly.scalajs.react._
 import japgolly.scalajs.react.test.TestUtil._
 import japgolly.scalajs.react.test._
 import japgolly.scalajs.react.vdom.html_<^._
+import org.scalajs.dom.ext.KeyCode
+import org.scalajs.dom.html
 import scala.annotation.nowarn
 import utest._
 
@@ -79,5 +81,33 @@ object VdomTest extends TestSuite {
       }
     }
 
+    "multipleEventHandlers" - {
+      val c =
+        ScalaComponent.builder[Unit]
+          .initialState("init")
+          .noBackend
+          .renderS { ($, s) =>
+
+            val eh1: ReactKeyboardEventFromInput => Callback =
+              e => $.setState("enter!").when_(e.keyCode == KeyCode.Enter)
+
+            val eh2: ReactKeyboardEventFromInput => Callback =
+              e => $.setState("SPACE!").when_(e.keyCode == KeyCode.Space)
+
+            <.input(
+              ^.onKeyDown ==> eh1,
+              ^.onKeyDown ==> eh2,
+              ^.readOnly := true,
+              ^.value := s)
+          }
+          .build
+      ReactTestUtils.withRenderedIntoBody(c()) { m =>
+        def txt() = m.getDOMNode.asMounted().domCast[html.Input].value
+        SimEvent.Keyboard.Enter.simulateKeyDown(m)
+        assertEq(txt(), "enter!")
+        SimEvent.Keyboard.Space.simulateKeyDown(m)
+        assertEq(txt(), "SPACE!")
+      }
+    }
   }
 }