Cannot save an edited contact

[Der-K-2000]

Describe the bug

With the new Contact-Version there is a huge problem, that appears, when I was editing an already existing contact and then want to save it via the save button (which is obviously new, because before an edited field was automatically saved).

The button is sometimes not clickable anymore.

But I don't see any logic behind this issue. The field and the input doesn't matter. Even after a page refresh.

Steps to reproduce

1. open a contact
2. click on edit button
3. edit/add a field
4. click save button

Expected behavior

button is clickable to save the edited fields and after that

Actual behavior

The button is not active anymore. The (graphical) mouseover hover works, the cursor is the pointer, but nothing happens, after the button is clicked.

Contact version

5.3.0-beta.1

Operating system

No response

PHP engine version

PHP 8.1

Web server

Apache (supported)

Database

MySQL

Additional info

No response

[ChristophWurst]

check the browser console log. any errors?

[ChristophWurst]

read/edit mode was added with #3347

[Der-K-2000]

check the browser console log. any errors?

As soon as I can reproduce the issue (it's really random), I will coming back.

So far there is only this notification after nearly every interaction (but not specific related to the problem I mentioned above):

jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own.

[Der-K-2000]

Ah now, it happens again. Those are the 2 outputs via Firefox (→ console), if I try to the save-button, but it isn't clickable anymore. Note: In the first output there are a lot of sub-objects, which are cropped here, and it seems Firefox cannot save the whole structure at once. I had to open every tree-link, which is too much for this moment.

The following contact has been repaired: invalid REV 
Object { jCal: Getter & Setter, addressbook: Getter & Setter, vCard: Getter & Setter, conflict: Getter & Setter, dav: Getter & Setter, … }
​
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
​​
dep: Object { id: 108811, subs: (21) […] }
​​​
id: 108811
​​​
subs: Array(21) [ {…}, {…}, {…}, … ]
​​​​
0: Object { deep: false, user: false, lazy: true, … }
​​​​​
active: true
​​​​​
before: undefined
​​​​​
cb: function N(e, t, n)
​​​​​​
length: 3
​​​​​​
name: "N"
​​​​​​
prototype: Object { … }
​​​​​​
<prototype>: function ()
​​​​​
deep: false
​​​​​
depIds: Set(4) [ 60275, 108811, 108814, … ]
​​​​​
deps: Array(4) [ {…}, {…}, {…}, … ]
​​​​​
dirty: false
​​​​​
expression: ""
​​​​​
getter: function enableToggleBirthdayExclusion()
​​​​​
id: 2746
​​​​​
lazy: true
​​​​​
newDepIds: Set []
​​​​​
newDeps: Array []
​​​​​
sync: false
​​​​​
user: false
​​​​​
value: Object { jCal: Getter & Setter, parent: Getter & Setter, _hydratedPropertyCount: 10, … }
​​​​​
vm: Object { _uid: 545, _isVue: true, "$options": {…}, … }
​​​​​
<prototype>: Object { get: get(), addDep: addDep(e), cleanupDeps: cleanupDeps(), … }
​​​​
1: Object { deep: false, user: false, lazy: false, … }
​​​​
2: Object { deep: false, user: false, lazy: true, … }
​​​​
3: Object { deep: false, user: false, lazy: true, … }
​​​​
4: Object { deep: false, user: false, lazy: true, … }
​​​​
5: Object { deep: false, user: false, lazy: false, … }
​​​​
6: Object { deep: false, user: false, lazy: true, … }
​​​​
7: Object { deep: false, user: false, lazy: true, … }
​​​​
8: Object { deep: false, user: false, lazy: false, … }
​​​​
9: Object { deep: false, user: false, lazy: true, … }
​​​​
10: Object { deep: false, user: false, lazy: true, … }
​​​​
11: Object { deep: false, user: false, lazy: true, … }
​​​​
12: Object { deep: false, user: false, lazy: false, … }
​​​​
13: Object { deep: false, user: false, lazy: true, … }
​​​​
14: Object { deep: false, user: false, lazy: true, … }
​​​​
15: Object { deep: false, user: false, lazy: true, … }
​​​​
16: Object { deep: false, user: false, lazy: false, … }
​​​​
17: Object { deep: false, user: false, lazy: true, … }
​​​​
18: Object { deep: false, user: false, lazy: true, … }
​​​​
19: Object { deep: false, user: false, lazy: true, … }
​​​​
20: Object { deep: false, user: false, lazy: false, … }
​​​​
length: 21
​​​​
<prototype>: Array []
​​​
<prototype>: Object { addSub: addSub(e), removeSub: removeSub(e), depend: depend(), … }
​​
value: Object { jCal: Getter & Setter, addressbook: Getter & Setter, vCard: Getter & Setter, … }
​​
vmCount: 0
​​
<prototype>: Object { walk: walk(e), observeArray: observeArray(e), … }
​
addressbook: 
​
conflict: 
​
dav: 
​
jCal: 
​
vCard: 
​
<get addressbook()>: function get()
​
<set addressbook()>: function set(t)
​
<get conflict()>: function get()
​
<set conflict()>: function set(t)
​
<get dav()>: function get()
​
<set dav()>: function set(t)
​
<get jCal()>: function get()
​
<set jCal()>: function set(t)
​
<get vCard()>: function get()
​
<set vCard()>: function set(t)
​​
length: 1
​​
name: "set"
​​
prototype: Object { … }
​​
<prototype>: function ()
​
<prototype>: Object { … }
​​
addToGroup: function value(e)
​​
constructor: function e(t, n)
​​
displayName: 
​​
email: 
​​
firstIfArray: function value(e)
​​
firstName: 
​​
fullName: 
​​
getPhotoUrl: function value()
​​
groups: 
​​
key: 
​​
kind: 
​​
lastName: 
​​
managersName: 
​​
org: 
​​
phoneticFirstName: 
​​
phoneticLastName: 
​​
photo: 
​​
properties: 
​​
rev: 
​​
searchData: 
​​
title: 
​​
toStringStripQuotes: function value()
​​
uid: 
​​
updateAddressbook: function value(e)
​​
updateContact: function value(e)
​​
url: 
​​
version: 
​​
<get displayName()>: function get()
​​
<get email()>: function get()
​​
<get firstName()>: function get()
​​
<get fullName()>: function get()
​​
<set fullName()>: function set(e)
​​
<get groups()>: function get()
​​
<set groups()>: function set(e)
​​
<get key()>: function get()
​​
<get kind()>: function get()
​​
<get lastName()>: function get()
​​
<get managersName()>: function get()
​​
<get org()>: function get()
​​
<set org()>: function set(e)
​​
<get phoneticFirstName()>: function get()
​​
<get phoneticLastName()>: function get()
​​
<get photo()>: function get()
​​
<set photo()>: function set(e)
​​
<get properties()>: function get()
​​
<get rev()>: function get()
​​
<set rev()>: function set(e)
​​
<get searchData()>: function get()
​​
<get title()>: function get()
​​
<set title()>: function set(e)
​​
<get uid()>: function get()
​​
<set uid()>: function set(e)
​​
<get url()>: function get()
​​
<get version()>: function get()
​​
<set version()>: function set(e)
​​
<prototype>: Object { … }
validate.js:48:6

and

Object { jCal: Getter & Setter, addressbook: Getter & Setter, vCard: Getter & Setter, conflict: Getter & Setter, dav: Getter & Setter, … }
validate.js:48:6
TypeError: e is undefined
    toICAL ical.js:429
    value ical.js:1698
    multiValue ical.js:1675
    property ical.js:1608
    component ical.js:1498
    toString ical.js:2772
    value contact.js:585
    n contacts.js:356
    c contacts.js:2
    y contacts.js:2
    v contacts.js:2
    gx contacts.js:2
    o contacts.js:2
    mx contacts.js:2
    mx contacts.js:2
    updateContact contacts.js:385
    FD vuex.esm.js:851
    dispatch vuex.esm.js:516
    dispatch vuex.esm.js:406
    t ContactDetails.vue:600
    c PropertyRev.vue:20
    y PropertyRev.vue:20
    v PropertyRev.vue:20
    hO PropertyRev.vue:20
    o PropertyRev.vue:20
    gO PropertyRev.vue:20
    gO PropertyRev.vue:20
    updateContact ContactDetails.vue:611
    t ContactDetails.vue:852
    c PropertyRev.vue:20
    y PropertyRev.vue:20
    v PropertyRev.vue:20
    hO PropertyRev.vue:20
    o PropertyRev.vue:20
    gO PropertyRev.vue:20
    gO PropertyRev.vue:20
    onSave ContactDetails.vue:853
    VueJS 2
    click index.module.js:2
    VueJS 3
vue.runtime.esm.js:1897:4
Got notification data, restoring default polling interval. NotificationsApp.vue:376

[ChristophWurst]

thanks

[Der-K-2000]

I'm not quite sure about this and I actually doubt there is a relation, but the issue often happens to me, when I edit the phonetic* name(s) and try to save the contact unsuccessfully.

*alphanumeric signs, no IPA

[st3iny]

The form should transition automatically into view mode after pressing save. I suspect that there is an error happening while saving.

Could you please check the network tab of your dev tools while saving and look for failing requests (code 4XX or 5XX)?

[Der-K-2000]

As I said, the button is inactive and not clickable sometimes, so there is also no interaction with the server (and therefore there are also no status codes I could submit).

The console output:

TypeError: e is undefined
    toICAL ical.js:429
    value ical.js:1698
    multiValue ical.js:1675
    property ical.js:1608
    component ical.js:1498
    toString ical.js:2772
    value contact.js:585
    n contacts.js:356
    c contacts.js:2
    y contacts.js:2
    v contacts.js:2
vue.runtime.esm.js:1897:4
    VueJS 6
    click index.module.js:2
    VueJS 33
jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 4 globals.js:59:15
jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 4 globals.js:59:15
Got notification data, restoring default polling interval. NotificationsApp.vue:376

[st3iny]

Is the save button is disabled right from the start? Just to clarify: You click the edit button and then the save button is not even clickable once?

[Der-K-2000]

Mostly the button is clickable to save the edited fields, but sometimes not – and then it looks like that:

demo.mp4

[st3iny]

Thanks for the demo.

This is weird indeed. I'm still not able to reproduce it. Are you sure that there is no error (red log line) in the browser's console?

Does that happen with multiple contacts or just one specific contact? If so, would it be possible to share the vcf file so that I can have a look at it?