ChipsInput's nested TextInput inherits height of entire container even when leadingAccessory causes a flex-wrap #3822
Description
Description
- When using Chips Input, when the chips cause a wrap, the TextInput component inherits the resulting parent container height and overflows.
- This is seemingly due to the nested View for the TextInput compoenent using the centerV prop
- Initial chips input
- Text field shown in red for visual clairty
- When not wrapping behaves as expected
-
When wrapped, the TextInput component inherited the parent components height, and overflows. (Chips/"Suggested" text from the 3rd row in the image are from a seperate component)
-
Also causes unwanted spacing from first and second row
-
Can work on/provide a PR for fix if requested!
Related to
- Components
- Demo
- Docs
- Typings
Steps to reproduce
- Use ChipsInput component in a fixed sized View, specific the textInput's style/height via inputStyle prop
- Add enough chip props to cause a chip overflow
- Use Element Inspector to view the dimensions of the ChipsInput and its inner TextInput elements,
Expected behavior
textInput should not stretch/overflow parent, if a height is specified via inputStyle, the TextInput should comply.
Actual behavior
Overflowed textinput with mismatching height/dimensions.
More Info
Code snippet
<View ref={viewRef}>
<BadgeInput
ref={ref}
placeholder={'Tags'}
chips={tagsProps}
value={currTagQuery}
onFocus={() => {
setIsFocused(true)
}}
onBlur={() => {
setIsFocused(false)
}}
onChangeText={(text) => {
setHasInput(text.length > 0)
onChangeText?.(text)
const cleaned = text.replace(/\s+/g, ' ').trim()
const tokens = cleaned
.split(' ')
.filter(Boolean)
.map((t) => t.trim())
if (tokens.length > 1) {
setTags((currTokens) => [...currTokens, { label: tokens[0] }])
setCurrTagQuery('')
} else {
setCurrTagQuery(text)
}
}}
onChange={(newChips: ChipsInputChipProps[]) => {
if (Array.isArray(newChips)) {
setTags(newChips ?? [])
}
}}
inputStyle={[styles.input]}
fieldStyle={[styles.tagsInputBody]}
style={[
styles.attributeInputBody,
{
backgroundColor: 'red',
},
]}
defaultChipProps={{
leftElement: renderIconElement('general'),
}}
{...props}
/>
Affected platforms
- Android
- iOS
- Web