4

I am adding a input box to a column in a Microsoft Fabric DeatialsList. I set it in the onRender of the IColumn definition. All works fine except the tabIndex is alway -1. I would like to set it to 0.

export default class Scrach extends React.Component<IScrachProps, {}> {
  private testData:{}[]=[{Item:1},
                        {Item:1},
                        {Item:1}];
  private testCols: IColumn[] = [
    {key:"col1",
        name:"Items",
        fieldName:"Item",
        onRender:(item)=>{return(<input style={{width:'3em'}} 
                                        tabIndex={0} 
                                        type="text" 
                                        defaultValue="1" 
                                        onClick={this.selectText}/>);},
        minWidth:60,
        isResizable:false
    }];

  public render(): React.ReactElement<IScrachProps> {
    return (
      <div>
        <DetailsList
          items={this.testData}
          columns={this.testCols}
          setKey="set"
          layoutMode={DetailsListLayoutMode.fixedColumns}
          selectionPreservedOnEmptyClick={true}
          selectionMode={SelectionMode.none}
      /> 
      </div>
    );
  }
}

Any ideas?

Mark
  • 803
  • 3
  • 11
  • 21
  • I don't see tabindex="-1", but tabindex="0" when I try to create a List similar to yours. Input tags shouldn't need tabindex anyway since they are focusable elements. Perhaps I need to better understand what behavior you look to achieve to see if its possible and/or if a bug exists in OUFR. Are you trying to have the input be the initially focused element when a row is focused? Here's the Codepen I setup to debug this -- https://codepen.io/kevintcoughlin/pen/RBmwem – kevintcoughlin Aug 14 '18 at 22:46
  • I agree but the codpen exampel does the same thing. with the tabindex being set to -1 it prevents focus. For the simple example on codepen several tabs should end up in the next one at some point. If you use the DevTools (F12) and look at the element it has the input set to tabindex -1. This prevents it from ever being tabbed into. I cant seem to get it to change from -1. – Mark Aug 19 '18 at 19:36

1 Answers1

0

Try to set data-is-focusable="true" in the column onRender instead of tabIndex.

kasap
  • 1