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.

score 2 · Accepted Answer · answered May 14 '19 at 17:17

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

score 1 · Answer 2 · answered May 14 '19 at 14:34

1

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

answered May 14 '19 at 14:34

jseteny

412
1
6
10

The "data:" before "tabindex" seems to disable the typechecking of "tabindex", as I understand the documentation: https://github.com/ThoughtWorksInc/Binding.scala#custom-attributes A good workaround! – Mattias May 14 '19 at 15:54

How to set tabindex attribute

2 Answers2