Open ttrvdw opened 3 months ago
After playing around some more, the issue seems to lie in the mode={'flat'}
. The click target has a smaller height than the height of the blue color applied to the chip. This happens only when the chip is placed in a row together with an element with a larger height.
Video illustrating the click target size is not correct:
https://github.com/user-attachments/assets/341a480f-4c35-49ae-9276-486c945df484
The issue is also showing when the chip is enabled. Root cause lies in the size changing for mode={'flat'}
if it's in a row with a larger component.
Hey @ttrvdw! 👋 I've just created a PR that resolves the shadow issue. However, I wasn't able to reproduce the problem with the Chip
changing size when selected. Could you please provide a code snippet demonstrating this issue? 🙏
Hey @ttrvdw! 👋 I've just created a PR that resolves the shadow issue. However, I wasn't able to reproduce the problem with the
Chip
changing size when selected. Could you please provide a code snippet demonstrating this issue? 🙏
Thanks for taking a deeper look into this issue!
Apologies for the confusion around this. Our setup is such that a we switch between flat
and outlined
when toggling from unselected to selected. A more accurate description of the issue is that the size of a chip seems to change in my setup when switching from flat
to outlined
and vice versa. Hope that clarifies the issue.
I got you! I gave it another go and toggled between flat and outlined modes, but I couldn't reproduce the issue.
Check out this Expo snack to see how I tested it: Expo Snack Link. I also ran it locally with the same versions of react-native and react-native-paper.
If there's anything I should tweak in my code to trigger the issue, just let me know!
Current behaviour
I'm rendering chip 1, an outlined chip that is not selected and not disabled in the same row as chip 2, a flat chip that is selected and disabled. Chip 2 is showing a shade at the bottom of the element.
The issue seems to only arise when putting chips 1 and 2 in the same row, stacking vertically results in the expected rendering:
Expected behaviour
Chip 1: outlined, not selected, not disabled Chip 2: flat, selected, disabled Putting Chip 1 and Chip 2 in the same row gives two chips of the same height, where Chip 2 does not have a shade at the bottom.
How to reproduce?
Preview
What have you tried so far?
Explicitly setting the height of the chips to 32 solves the problem. I suspect a problem with two different overlays (disabled and selected) with different flex properties.
Edit: The above proposed fix still causes problems with chips that have an onClose handler, as the cross icon increases the size of the chip.
Your Environment