Initially disabled element breaks focus wrap

[JonathanTR]

First off: this is an awesome library that's saved me a big headache in implementation. Thanks for your work on this!

I've found an issue with having an initially disabled button in the mix. In my case, I disable the save button on a modal form if no changes have been made. However, I've found that having that element initially disabled breaks the focus wrap so that it stops on the button. Perhaps something to do with how the lock is initialized?

Here's a minimal example:

class ExampleForm extends React.Component {
  state = {
    string: ""
  }

  render(){
    return (
      <FocusLock>
        <input 
          onChange={ ({ target }) => this.setState({ string: target.value }) } 
          type="text" 
          tabIndex="1" 
        />
        <button 
          disabled={this.state.string.length == 0} 
          tabIndex="1"
        >
          Save
        </button>
      </FocusLock>
    )
  }
}

What I may do in the meantime is change how I disable buttons, although it would be ideal to stick with the browser implementation. Thanks for taking a look at this - let me know if there's any other info I can gather.

[theKashey]

The problem is not with disabled, but with disabled + tabIndex. Are you sure you need tabIndex?

[theKashey]

Anyway - that's my mistake. I'll fix it a but later, but removing tabIndex will fix everything right now.
See https://codesandbox.io/s/204kx1xjry

[theKashey]

Fixed in 1.17.5

[JonathanTR]

Thanks!