Scala.js event handling - scala

Question

I'm writing a little Scala.Js app that uses two event handlers: one for an input field's onkeyup event and another for a button's onclick event.
The two event handlers share quite a bit of common coding, but as soon as I try to optimise the event handler coding into a single function that returns an event handler function, it compiles correctly, but events are no longer trapped in the browser.
In the following code in function main, the event handler for btn.onclick works fine, but the event handler for cityNameInput.onkeyup no longer works. All I did was copy the coding assigned directly to the event handler, and put it in a function called keystrokeHandler that returns a Function1[dom.Event, _]. This compiles OK, but the onkeyup event is no longer trapped in the browser.
def keystrokeHandler(userInput: String, responseDiv: dom.Element): Function1[dom.Event,_] =
(e: dom.Event) => {
// The city name must be at least 4 characters long
if (userInput.length > 3) {
responseDiv.innerHTML = ""
val xhr = buildXhrRequest(userInput, searchEndpoint)
xhr.onload = (e: dom.Event) => {
val data: js.Dynamic = js.JSON.parse(xhr.responseText)
// Can any cities be found?
if (data.count == 0)
// Nope, so show error message
responseDiv.appendChild(p(s"Cannot find any city names starting with ${userInput}").render)
else {
// Build a list of weather reports
buildSearchList(data, responseDiv)
}
}
// Send XHR request to OpenWeather
xhr.send()
}
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Main program
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#JSExport
def main(container: dom.html.Div): Unit = {
container.innerHTML = ""
val cityNameInput = input.render
val btn = button.render
val weatherDiv = div.render
cityNameInput.defaultValue = owmQueryParams.get("q").get
btn.textContent = "Go"
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Button onclick event handler
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
btn.onclick = (e: dom.Event) => {
if (cityNameInput.value.length > 3) {
weatherDiv.innerHTML = ""
val xhr = buildXhrRequest(cityNameInput.value, weatherEndpoint)
xhr.onload = (e: dom.Event) => {
val data = js.JSON.parse(xhr.responseText)
// Can the city be found?
if (data.cod == "404")
// Nope, so show error message
weatherDiv.appendChild(p(s"City ${cityNameInput.value} not found").render)
else {
// So first add the div containing both the weather information
// and the empty div that will hold the slippy map.
// This is needed because Leaflet writes the map information to an
// existing DOM element
val report = new WeatherReportBuilder(data)
weatherDiv.appendChild(buildWeatherReport(report, 0))
buildSlippyMap("mapDiv0", report)
}
}
// Send XHR request to OpenWeather
xhr.send()
}
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Input field onkeyup event handler
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
cityNameInput.onkeyup = keystrokeHandler(cityNameInput.value, weatherDiv)
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Write HTML to the screen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
container.appendChild(
div(
h1("Weather Report"),
table(
tr(td("Enter a city name (min 4 characters)"), td(cityNameInput)),
tr(td(), td(style := "text-align: right", btn))
),
weatherDiv
).render
)
}
What's the problem here?
Should the keystrokeHandler function return some special Scala.Js event handler type? Or is it something else?
Thanks
Chris W

Answer 1

I think the problem is here:
cityNameInput.onkeyup = keystrokeHandler(cityNameInput.value, weatherDiv)
The event handler is triggered, but the userInput is frozen to cityNameInput.value at the time the handler was created, instead of varying with the current value of cityNameInput.value. Indeed, that line is equivalent to
val userInput = cityNameInput.value
cityNameInput.onkeyup = keystrokeHandler(userInput, weatherDiv)
which makes it obvious that cityNameInput.value is only evaluated once.
Instead, you should give cityNameInput itself as parameter to keystrokeHandler, and access cityNameInput.value inside the anonymous function, so that it is evaluated every time the function (handler) is called.