Wijmo.InputDate tabindex in React

Wijmo.InputDate tabindex in React

Posted by: yutaka.oda on 26 February 2020, 7:41 am EST

• 

  yutaka.oda

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 February 2020, 7:41 am EST

  I tried to put tabindex in Wijmo.InputDate like below but the result dom doesn’t have tabindex.
  
  How can I implement tabindex for InputDate?

  • React 16.8.6
  • Wijmo 5.20193.637

  JS

  
                <wjInput.InputDate 
                  tabIndex="10"
                  isRequired={true}
                  id="invoiceDate"
                  value={new Date(this.state.invoiceDate).toLocaleDateString()}
                  valueChanged={this.dateChangeHandler} 
                  />
  
  

  DOM

  
  <input wj-part="input" type="" class="wj-form-control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="">
  
  

• 

  yutaka.oda

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 9:39 am EST - Updated 3 October 2022, 8:12 am EST

  

  I found that wrapper div tag has tabindex but it doesn’t work as tabindex for input field.
  
  How can I put tabindex inside input tag?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 4:18 pm EST

  Hi,

  You will need to get the reference of the inputElement and then set the tabindex directly on it:

  <InputDate 
  initialized={this.initDate.bind(this)} />
  

  initDate(date) {
  	date.inputElement.tabIndex = 10;
  }
  

  Regards,
  
  Ashwin

• 

  yutaka.oda

  • Post Options:
  • Link
    Copy

  Posted 27 February 2020, 4:44 pm EST

  You saved my day. Thank you!