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
Tl;dr: Button with underlying Icon and Chip with underlying Icon causes validateDOMNesting check to fail for web renders because of nested <button>.
Describe the solution you'd like
To mitigate this, I propose the following changes:
Icon need not behave as an HTML <button> if there are no onPress or related callbacks defined.
As an extension to the above: Icon should not allow onPress or related callbacks in case it is used as a child component of a Button
[Optional, but I think this is good] Chip need not behave as a Button because according to the docs: "Chips are compact elements that represent an input, attribute, or action. They may display text, icons, or both". My understanding is that they can also be used as "discrete labels/tags" to associate some sort of metadata (similar to "Labels" in Jira or "Multi-Select Tags" in Notion). In that case, Chip can have a clickable Icon.
Describe alternatives you've considered
<Icon.Button> from react-native-vector-icons conditionally be a functional replacement to <Button icon={}>, but it is less flexible.
Additional context
The text was updated successfully, but these errors were encountered:
would be great to see this issue fixed & merged, coz now it's super strange to see button inside button after build, despite docs show possibility to use Icon inside Button component
Is your feature request related to a problem? Please Describe.
Please refer to #3857
Tl;dr:
Button
with underlyingIcon
andChip
with underlyingIcon
causesvalidateDOMNesting
check to fail for web renders because of nested<button>
.Describe the solution you'd like
To mitigate this, I propose the following changes:
Icon
need not behave as an HTML<button>
if there are noonPress
or related callbacks defined.Icon
should not allowonPress
or related callbacks in case it is used as a child component of aButton
Chip
need not behave as aButton
because according to the docs: "Chips are compact elements that represent an input, attribute, or action. They may display text, icons, or both". My understanding is that they can also be used as "discrete labels/tags" to associate some sort of metadata (similar to "Labels" in Jira or "Multi-Select Tags" in Notion). In that case,Chip
can have a clickableIcon
.Describe alternatives you've considered
<Icon.Button>
fromreact-native-vector-icons
conditionally be a functional replacement to<Button icon={}>
, but it is less flexible.Additional context
The text was updated successfully, but these errors were encountered: