Shadow Appears on Disabled, Selected Flat Chip When Rendered Next to Outlined Chip in Same Row #4457
Description
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?
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Chip} from 'react-native-paper';
const Demo = () => {
return (
<View style={styles.container}>
<Chip mode="outlined" selected={false} disabled={false}>
Not selected, enabled
</Chip>
<Chip mode="flat" selected={true} disabled={true}>
Selected, disabled
</Chip>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
});
export default Demo;
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
| software | version |
|---|---|
| ios | 17.5 |
| react-native | 0.74.3 |
| react-native-paper | 5.12.3 |
| node | 20.12.2 |
| yarn | 1.22.22 |
| expo sdk | 0.10.11 |