Input element losing focus on each edit about scalajs-react HOT 3 CLOSED

I'm glad that worked. I assume it didn't work because by having the component definition inside, React always thought it was a new component and destroyed and recreated it. After recreating it has no idea it should focus it too, hence your problem. When you create a component it's like creating a class in Scala. You only very, very rarely create a new class inside a function/method; normally the class is defined elsewhere and you only create a new instance of it in a function.

from scalajs-react.

Hi. I think should align it a bit more with the JS example, it'll work. So move the declaration of Example out from the inside of Examples, and pass in the onChange callback through properties. That's probably all you need.

from scalajs-react.

Hmmm... indeed it works with your suggested change. I am not sure, however, why that made a difference. It will be great if you can explain so that I can apply the same refactoring to similar components in my real project. Thanks!

Here is my refactored main(), in case someone comes here looking:

  def main(): Unit = {
    val Example = ReactComponentB[(String, SyntheticEvent[HTMLInputElement] => Unit)]("Example")
      .render{ props =>
        val (v, change) = props
        input(value := v, onchange ==> change)
      }.build

    val Examples = ReactComponentB[Unit]("examples")
      .initialState(IndexedSeq("first", "second"))
      .backend(new ExampleBackend(_))
      .render((_,state,backend) => {
          val Elements = state.zipWithIndex.map{case(v, index) => {
            Example.withKey(s"key$index")((v, backend.onChange(index)))
          }}
          div(Elements)
        }
      ).build(())

    React.renderComponent(Examples, dom.document.getElementById("playground"))
  }

from scalajs-react.