Chips component doesn't work on mobile

[macingili]

Describe the bug

chips component doesn't work on mobile.When enter is pressed, it moves to the next field

Reproducer

https://primevue.org/chips

PrimeVue version

3.23.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Android

Steps to reproduce the behavior

No response

Expected behavior

No response

[KaKi87]

Hello, Any news on this ? Thanks

[FVolral]

I confirm, that on iOS, using Enter key or Separator works. but on Android, the keyboard layout doesn't provide any 'Enter' key and nothing happens when touching the ',' key. maybe the keycode is different ?

[Lukasss93]

Same issue on my android

[Lukasss93]

How to fix the issue: https://clark.engineering/input-on-android-229-unidentified-1d92105b9a04

[MarcelGeo]

same issue

[MarcelGeo]

I think separator is also not working on mobile

[Lukasss93]

How I (temporarily) solved this problem in my project:

Caused in:

Chrome for Android (only)

Problem and solution:

https://clark.engineering/input-on-android-229-unidentified-1d92105b9a04

Why don't you use another browser?

Because I'm using this library in a MiniApp for Telegram. Telegram uses Android's default webview (Chrome) and I can't force every user to switch webview (if it's possible).

Temporary fix in my project:

<Chips v-model="tags"
    :ptOptions="{ mergeProps: true }"
    :pt="{input: { id: 'chipper'}}"
    separator=" "/>

<script setup>
import Chips from 'primevue/chips';
//import script from https://clark.engineering/input-on-android-229-unidentified-1d92105b9a04
import * as K from '@/Support/Utils'; 

let tags = ref([]);
let canDeleteChip = 0;
let recentDelete = false;

const handleEvent = (element, e: K.CompatibleInputEvent) => {
    element.value = element.value.trim();

    if(e.inputType !== 'deleteContentBackward'){
        canDeleteChip = 0;
        recentDelete = false;
    } else if(element.value === '' && !recentDelete){
        canDeleteChip++;
    }

    if(e.data === ' ' || e.data === 'Enter'){
        if(tags.value.includes(element.value)){
            return;
        }
        tags.value = [...tags.value, element.value.trim()];
        element.value = '';
        canDeleteChip = 1;
        recentDelete = false;
    } else if(e.inputType === 'deleteContentBackward' && element.value === '' && canDeleteChip===2 && tags.value.length > 0){
        tags.value = tags.value.slice(0, -1);
        element.value = '';
        recentDelete = true;
    }
};

onMounted(() => {
    document.getElementById('chipper')?.addEventListener('keydown', (event) => {
        const e = K.normalizeInputEvent(event);

        if (!K.IS_INPUT_SUPPORTED || event.key.length > 1) {
            handleEvent(event.target, e);
        }
    }, false);

    document.getElementById('chipper')?.addEventListener('input', (event:InputEvent) => {
        if (K.IS_INPUT_SUPPORTED) {
            handleEvent(event.target, K.normalizeInputEvent(event));
        }
    }, false);
});
</script>

[MarcelGeo]

Very sad, that browsers having such differences.

[Lukasss93]

Any news about this fix? 😊 I wrote the solution in my previous message

[graficon]

Same issue.