I am working in a scalajs-react application. One of the UI field I have is an input field for multiline text, and it is mapped to a property of state object. State object definition:
case class Person(name: String, addresses: Seq[String])
I have corresponding UI field for addresses as:
<.label("Addresses:",
<.input(^.`type` := "text", ^.cls := "form-control",
^.value := person.addresses.mkString("\n"), ^.onChange ==> updateAddresses))
def updateAddresses(event: ReactEventFromInput): Callback = {
val updatedAddresses = event.target.value.split("\\\\n").toSeq // based on some google search
$.modState(prev => prev.copy(addresses = updatedAddresses))
}
But seems it doesn't work. I am not able to add a newline entry on UI.
How can it be achieved?
You have to you textarea html tag for multiline text input. (see https://www.w3schools.com/tags/tag_textarea.asp)
This works:
<.label("Addresses:",
<.textarea(^.`type` := "text", ^.cls := "form-control",
^.value := person.addresses.mkString("\n"), ^.onChange ==> updateAddresses))