TabIndex prop is called "tabIndexValue" in most of the components.

[raquelarrojo]

In dateInput, numberInput, passwordInput, select, textInput, textarea and toggle group, the prop is called tabIndex. In the rest of the components, the prop is called tabIndexValue.

[aidamag]

Because of tabIndex is a reserved word, it will be applying this prop in the host component as well as in the component we really want to have this focus. So we will be having two focus. The easiest way to resolve this it's changing the prop name.

Example of a chip component with tabIndex prop:

    <dxc-chip
      label="Chip with suffix"
      margin="xsmall"
      tabIndex="10"
      (suffixIconClick)="onClick()"
    >
      <dxc-chip-suffix-icon>
        <svg height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
          ></path>
        </svg> </dxc-chip-suffix-icon
    ></dxc-chip>

If we apply a tabIndex prop in a chip component for the icon, we only want to have focus on that icon. However, in the DOM it will be applying two tabIndex.

And in the component it will have these two focus: