primevue
primevue copied to clipboard
primefaces
Chips component doesn't work on mobile
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
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 ?
How to fix the issue: https://clark.engineering/input-on-android-229-unidentified-1d92105b9a04
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>
