`Separator` does not allow users to override `tabIndex=0`

[LuHugo]

I'm using version 4.0.15, and I'm trying to reset the tabindex property, but it's not working. I looked at the source code and found that tabindex is placed after the reset property, which is why the property cannot be reset.

[bvaughn]

"Reset" to what? Can you share some code and context on why you want to override the tabIndex prop?

Certain DOM attributes are intentionally not overridable in version 4 because overriding them would break functionality. (For instance, setting tabIndex to -1 or undefined would be incompatible with the "separator" role that the component adheres to (at least to my understanding).

I'd still like to know more about what you're doing/why, but would the changes implemented in #571 be enough to support your use case? (Updated docs page here.)

[LuHugo]

Thank you for your reply. I'm developing a desktop application with a split layout. All components requiring focus on click have separate styles, so my CSS is global: #app [tabindex=‘0’] :focus. However, I don't want the separator to gain focus on click. I want it to highlight only on drag and hover, like in VS Code. To achieve this, I must set the Separator to a different value—ideally tabindex=-1.
Perhaps I was fixated on this property. Following your suggestion, I've applied this style which temporarily achieves the desired effect, though it also removes the possibility of tab focus:

#app [role=‘separator’]:focus {
  outline: none;
}

[bvaughn]

I dont think that “removed the possibility of time focus”, does it? Looks like it just hides the focus style?

That being said, if you don’t want a focusable separator, just don’t use the separator component. Either render your own div with a custom style or just render nothing. The separator is optional. Panel edges will be resizable by a mouse either way.

I don’t think I’m willing to make a change that allows the tab index to be disabled, but also it sounds like you don’t really or want the separator.

[LuHugo]

@bvaughn
You're right, but I'm using shadcn/ui based on the react-resizable-panels library, and I didn't want to do too much customization. The current changes already meet my needs. Thanks.

[bvaughn]

Got it. Thank you. I'll repurpose #571 to just update the TS types then, so as to avoid confusion for others.