You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In order to implement controllable active tab, or specify default active tab, I need to provide tab IDs. However, these IDs seem to be also used as HTML id attribute, creating potential clashes and breaking component's encapsulation. This is different from, for example, Select component, where SelectItem's value prop is used for a similar purpose (to identify an item in a collection), but it doesn't interfere with DOM's id.
Note that other examples alsosuffer from the same problem of global IDs.
React Aria's Tab component is generating unique IDs to use in DOM.
I do think that the current behaviour can create hard to debug issues (and the example already has them). Of course global IDs will likely not be an issue in an example, but they very well might be in a more complex app (in our case these IDs are dynamic and come from the backend).
Workaround
The only idea I currently have is to generate a unique ID using useId(), and:
prepend it to all IDs that Ariakit receives
strip it from all IDs that are being sent back to the consumer, e.g. in TabProvider's setSelectedId callback
This is not an ideal approach, of course, as it will require string manipulation and creation of a new context so that all involved components have access to this ID (I'm working on a component library built on top of Ariakit).
Possible implementations
Introduce another property called value that works in a similar way but doesn't clash with DOM id.
The text was updated successfully, but these errors were encountered:
With this approach, everything is automatically prefixed, and callbacks like setSelectedId will return without the prefix. The only exception is when you're working directly with the DOM, in which case you should manually include the prefix (for example, when calling document.getElementById(`${id}foo`)).
Do you think this could be a solution to the problem?
I think this approach would make things simpler that the current workaround. However, it's still not reaching the simplicity of React Aria's solution. It's a prop one needs to be aware of and remember to use when implementing tabs.
However, I also acknowledge that React Aria's approach means that getting the actual DOM id is trickier (but perhaps it's not a pattern that they encourage, I couldn't find any examples in the docs).
Motivation
Consider existing Tab example: https://ariakit.org/components/tab
In order to implement controllable active tab, or specify default active tab, I need to provide tab IDs. However, these IDs seem to be also used as HTML
id
attribute, creating potential clashes and breaking component's encapsulation. This is different from, for example, Select component, whereSelectItem
'svalue
prop is used for a similar purpose (to identify an item in a collection), but it doesn't interfere with DOM'sid
.Note that other examples also suffer from the same problem of global IDs.
React Aria's Tab component is generating unique IDs to use in DOM.
I do think that the current behaviour can create hard to debug issues (and the example already has them). Of course global IDs will likely not be an issue in an example, but they very well might be in a more complex app (in our case these IDs are dynamic and come from the backend).
Workaround
The only idea I currently have is to generate a unique ID using
useId()
, and:TabProvider
'ssetSelectedId
callbackThis is not an ideal approach, of course, as it will require string manipulation and creation of a new context so that all involved components have access to this ID (I'm working on a component library built on top of Ariakit).
Possible implementations
value
that works in a similar way but doesn't clash with DOM id.The text was updated successfully, but these errors were encountered: