reactjs - How to change Material-UI Button's tabIndex?

Question

I am using Material-UI in one of my ReactJS projects. I have a few buttons: some - primary, the rest are secondary. What I want to achieve is to disable the tabIndex property on secondary buttons, leaving only the primary buttons accessible with the keyboard tab.

Turns out setting tabIndex attribute to the Button component does not work, nor setting the tabIndex via inputProps:

<Button
  variant="contained"
  tabIndex="-1"  //does not work
  size="small"
  startIcon={SearchIcon}
  color='secondary'
  inputProps={{ tabIndex: "-1" }}  //does not work either
 > some text
</Button>

How do I achieve disabling the accessibility of the secondary buttons via keyboard tab? I can't set tabindex attribute to an element via CSS, can I?

Any help would be appreciated. Thank you.

question from:https://stackoverflow.com/questions/65838422/how-to-change-material-ui-buttons-tabindex

Answer 1

for textfield and input you must code like this

      <TextField label="1" inputProps={{ tabIndex: "1" }} />

for button your code must be like this

      <Button tabIndex="2">Button 2</Button>