not creating any tags on mobile view

[dk9071091]

i m using mobile chrome browser and opera browser for mobile but it's not creating any tag and moving to the next input field.

[ad1992]

@dk9071091 I just tried the demo in chrome in android and it works for me, could you share the code which you are trying out ?

EDIT: nvm I am able to reproduce it

[dk9071091]

<TagsInput value={state.languageTags} //tagsArray onChange={handleChangeTags} //function inputValue={state.language} //single tag addKeys={[9,13,188,32]} //keyboard key code onlyUnique={true} onChangeInput={handleChangeInput} //function />

[1c7]

any update?

[ad1992]

@1c7 I haven't gotten time to work on this, hoping to wrap it up this weekend.

[diptnc]

facing the same issue . that the we can add tags in desktop but not able to add tags in mobile

                            ```
<ReactTags
                                        delimiters={delimiters}
                                        tags={tags}
                                        editable={true}
                                        onChange={(newTags) => setTagfunc(newTags)}

                                        addKeys={delimiters} //keyboard key code

                                        handleDelete={handleDelete}
                                        handleAddition={handleAddition}
                                    />

[1c7]

Update: in iOS 14&15(iPhone 12), all browser I found on App Store (about 6 mainstream browser in China region) can create tag correctly. press "Enter" can create tag. work just like destop.

But on Android (OnePlus 6T, phone from 2018) pressing "Enter" will move the cursor to next input, would not create any tag(it should)

OnePlus 6T

• Android Version: 11
• Test Browser: Liebao browser
• CPU: Snapdragon 845
• 6.41 AMOLED Display
• OS name: H2OS OP6T_H2_BETA_3
• ONEPLUS A6010_41_210805

[1c7]

I haven't found solution on how to fix this Android-only issue

[davibarberini]

@1c7 did you found a solution? I'm having the same issue on Android mobile view

[1c7]

@davibarberini I don't know, I am working on some other project now, I am not sure my colleague remove this input field or did some fix, no idea.

[rashedsafa]

@davibarberini I don't know, I am working on some other project now, I am not sure my colleague remove this input field or did some fix, no idea.

You can try this solution, https://github.com/react-tags/react-tags/issues/678#issuecomment-749003020 it works for me in my OnePlus 9R

[AlexEdimensionz]

I HAVE A SOLUTION!

It's non-invasive and easy to implement. Works for Android and doesn't do anything for other devices/platforfms that work.

It checks to see if the key code is 'Unidentified'. That's what's causing the issue with Android support.

Step 1 Add this code which will generate a triggerable event to simulate an ENTER key

const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', bubbles: true, cancelable: true, which: 13, keyCode: 13, });

Step 2 Add the following prop to the ReactTags component. The if(lastLetter ... part should have a list of the characters you want to listen for. In my example, comma and space are my custom triggers

inputProps={{ onKeyUp: (e) => { if(e.key === 'Unidentified'){ var inputValue = e.target.value; var lastLetter = inputValue.charAt(inputValue.length - 1); if(lastLetter === ',' || lastLetter === ' ') { e.target.dispatchEvent(enterEvent); } } } }}

Step 3 Modify your handleAddition function to filter out the characters you designated as your triggers (as they will get added to the tags otherwise).

You should filter them out of the tag.id and tag.text

const handleAddition = tag => { tag.id = tag.id.replace(/,/g, '').replace(/ /g, ''); tag.text = tag.text.replace(/,/g, '').replace(/ /g, ''); setTags(prev => [...prev, tag]); };

That's it!