Material-ui: TabIndex of -1 not working for TextField and Select (possibly others)

[StevenRasmussen]

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Specifying a tabindex of -1 should make it so that the control does not receive focus when using the tab key.

Current Behavior

TextField and Select still receive focus when a tabindex of -1 is specified. I haven't tested other controls but they may also be affected.

Steps to Reproduce (for bugs)

See here: https://codesandbox.io/s/l24mx1240q

1. Click on the compiled window.
2. Press the tab key
3. Both the TextField and Select receive focus.

[kgregory]

For TextField, you have access to the input element via InputProps, which will be spread to the Input component. Input has an inputProps property, which is used to spread properties onto the input element.

Here is an example:

<TextField InputProps={{ inputProps: { tabIndex: -1 } }} />

[mbrookes]

@kgregory It does feel like intuitively this should just work, i.e. tabIndex should be passed the underlying form component, without the user having to worry about the internals in this case.

[oliviertassinari]

It does feel like intuitively this should just work, i.e. tabIndex should be passed the underlying form component

@mbrookes How is this property related to an input? Users could be targeting the root element.

[kgregory]

@mbrookes A big part of the problem is that we offer _some_ props that will make their way to input. This gives the impression that any input attribute should be handed down, but TextField is an abstraction of several other components and the input element isn't directly exposed.

I think the InputProps, InputLabelProps, SelectProps, approach is fine, as long as the structure is clearly expressed to the user. I know we got rid of inputProps for this component, but maybe it makes sense for an abstraction like this.

It would be a nice interface to offer control to the elements that are obvious to the user. Eliminate the top level individual input element props, restore inputProps, and now we have specific control over Input, InputLabel, Select, input, and all other props are spread onto the FormControl.

[oliviertassinari]

restore inputProps

@kgregory I would vote 👍 for this. It's kind of better documented now: https://material-ui-next.com/api/text-field/#advanced-configuration.

[kgregory]

@oliviertassinari I saw that and thought it should be very helpful. I'll see if I can put a PR together tonight.

[StevenRasmussen]

Thanks for the help! I was able to update the codesandbox example and now the TextField behaves as expected. However, the Select is still having issues. Any thoughts? See here: https://codesandbox.io/s/l24mx1240q

[mbrookes]

@oliviertassinari

How is this property related to an input? Users could be targeting the root element.

tabIndex affects the focus order, so it intuitvely makes sense that it target the component that is focused when keyboard focus is applied. I can understand the argument for being consistent, so whatever's the priority works, I was just pointing out the obvious cause for confusion.

[kgregory]

@SimplerSoftware It is possible with native Select (codesandbox):

      <Select
        value=""
        input={
          <Input
            name="age"
            id="age-helper"
            inputProps={{ tabIndex: -1 }}
          />
        }
        native
      />

However, it isn't possible with non-native Select, because tabIndex is being set to zero or null, depending on the value of disabled.

[oliviertassinari]

I saw that and thought it should be very helpful. I'll see if I can put a PR together tonight.

@kgregory If you don't mind. I have made a PR in the subway going back from work. I have seen quite some people asking about it after only a week. Let's revert. It won't cost us much. It's important.

[kgregory]

@oliviertassinari I don’t mind at all. I’ll find something else to work on tonight!