Unexpected behaviour on removing tag's text.

[Kishan Bharda]

In my project I have used this library to get the different variants of color from the user.

Here is the code :

<View style={{ marginVertical: 10, marginLeft: 20, justifyContent: 'center' }}>
    <MText size={18}>Colors</MText>
</View>
<Tags
    initialText=""
    textInputProps={{
        placeholder: "Enter Color",
        blurOnSubmit:false
    }}
    initialTags={this.state.colors}
    createTagOnString={[","]}
    createTagOnReturn={true}
    onChangeTags={(tags) => {
        this.setState((prevState) => ({
            colors: tags
        }), () => this.handleVariantChanges());
    }}
    onTagPress={(index, tagLabel, event, deleted) => console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted")
    }
    containerStyle={styles.tagContainer}
    inputStyle={{ backgroundColor: "white" }}
    renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
        <TouchableOpacity style={styles.tag} onPress={onPress} key={index.toString()}>
            <Icon name="times" color="#aaa" />
            <MText>{' '}{tag}</MText>
        </TouchableOpacity>
    )}
/>

Now, after running project I added some tags. Tags is added successfully. Then I continue to add another tags but spelling is not right so I removed till first character, but previous tags also removed automatically.

Another problem is that If I want to remove tag after adding some tags I am not able to remove that tag.

Here is problem gif :

Please tell me what's going wrong here !!!

[Peter Pistorius]

Interesting. I would expect the erased text to placed in the input. I'll see if I can reproduce this.

[Kishan Bharda]

@peterp this only happens if I use state value as a initialTags. If I keep initialTags as a blank array then everything working properly.

[Kishan Bharda]

I think my issue also related to this.

[Kishan Bharda]

I solved this issue. Here is the solution. Thanks very very mush to @cdoshi.