How to set tabindex attribute

Question

When using Binding.scala, I can not write html that uses the tabindex attribute. Is this a bug in Binding.scala / scala.js?

  <div>
    <input tabindex="1"></input>
    <input tabindex="3"></input>
    <br></br>
    <input tabindex="2"></input>
    <input tabindex="4"></input>
  </div>

Results in compile error:

ScalaFiddle.scala:12: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:13: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:15: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:16: error: value tabindex is not a member of scalajs.this.dom.html.Input

I tried to use the attribute (or property?) tabIndex, but it is not a string and the attribute argument needs to be a string.

For example see this: https://scalafiddle.io/sf/kDg2uAA/0

I am quite new to scala, sbt and scala.js, so I am not sure where/how to fix this and how to test a fix locally before creating a pullrequest.

Answer 1

You can use the tabIndex attribute with a value enclosed in {} (tip: you can use any scala code inside!).

<div>
  <input tabIndex={1}></input>
  <input tabIndex={3}></input>
  <br></br>
  <input tabIndex={2}></input>
  <input tabIndex={4}></input>
</div>

Please, see a full code here: https://scalafiddle.io/sf/hGkAVib/1

Answer 2

You need to use the data:tabindex property. Please see https://scalafiddle.io/sf/TlcSdfF/1