How to make tab skip the icon inside MUI Time Picker?

What I have

I have a MUI Time Picker component inside React.

Goal

I would like to modify the tabbing behavior. By default if the user fills out the input and presses Tab the focus will jump to the clock icon inside the time picker. This is unnecessary since that icon is only needed when the user uses the mouse. After the input is filled via keyboard Tab should jump to the next field. The default behavior requires the user to press Tab twice which slows down usage through the keyboard.

What I tried

I have a basic TimePicker. I just want to know how to configure it:

<TimePicker label="Basic time picker" />

Problem

Usually the API docs list a lot of customization options but tab behavior doesn't have a prop.

tl;dr

Set the tabIndex prop of the openPickerButton inside the TimePicker 's slotProps.

Solution

<TimePicker
  label="Basic time picker" 
  slotProps={{
    openPickerButton: {
      tabIndex: -1,
    },
  }}
/>

Usually, MUI components expose a slotProp prop that can be used to pass props to the underlying components inside its slots. Just go to the Slots section of the API docs and find the name of the component whose behavior you would like to change (openPickerButton in this case) and override its related props via slotProps or provide a custom component via slots .