scalajs-react: How to have multiline text field from a Seq in state object?

Question

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?

score 0 · Answer 1 · answered Oct 11 '21 at 20:25

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))

scalajs-react: How to have multiline text field from a Seq in state object?

1 Answers1