Quasar: Dialog plugin's `update` API merge causes unwanted effects

[yongwee]

Describe the bug

Dialog plugin's update does a recursive merge if cfg is an object.

Not exactly sure why this is the intended behaviour but it does cause some unwanted effects, for example

1. It cannot replace object prop
   
   
   
   • There is no way to replace the prop with a different object; the current prop object will merge with the new one.
   
   
2. It cannot deal with objects containing circular references
   
   
   
   • Passing in an object that contains circular reference will cause stack overflow; implications being some 3rd party clients (e.g. Twilio chat client) cannot be passed into dialog via the update API
   
   

Codepen/jsFiddle/Codesandbox (required)

• Cannot replace object prop
  
  
  
  • https://codepen.io/ewuy2/pen/BaKemXd
  
  
  • Open dialog and see result in dialog body
  
  
• Cannot deal with circular reference
  
  
  
  • https://codepen.io/ewuy2/pen/bGpyapL
  
  
  • Open dialog and look at console output
  
  

To Reproduce

Cannot replace object prop

if I were to pass in an map of workplace staff into a dialog:

const oldStaff = {
  'alan': 'Alan'
};

this.staffDialog = this.$q.dialog({
  component: customDialog,
  staff: oldStaff,
});

and then list gets replaced with a new set of set of staff

const currentStaff = {
  mary: 'Mary',
};

this.staffDialog.update({
  staff: currentStaff,
});

the dialog will show a merged set of staff instead of just the current one i.e.
{ "alan": "Alan", "mary": "Mary" } instead of {"mary": "Mary" }

Cannot deal with objects containing circular references

In addition, it does not play well when trying to pass in objects that contain circular references, such as Twilio's chat client; a stack overflow will happen. e.g.

const parentInstance = {};

const childInstance = {
  parent: parentInstance,
};

parentInstance.child = childInstance;

this.dialog.update({ family: parentInstance }); // ==> causes stack overflow

Expected behavior

Instead of a deep recursive merge, perhaps a simple replacement for object as is done for other prop types like this would suffice.

Screenshots
If applicable, add screenshots to help explain your problem.

Unable to replace object:

Console error when passing in object:

Platform (please complete the following information):
OS: MacOS 10.15.6
Node: 12.16.1
NPM: 6.13.4
Yarn: 1.22.5
Browsers: Chrome 85.0.4183.121
iOS: N/A
Android: N/A
Electron: N/A

Additional context

N/A

[rstoenescu]

Hi,

Yes, this is the actual design, because it is meant for non-custom components and instead for the default one. If you look at the props there it'll make sense (like when you update() you may only want to update the model -- and not having to specify the whole "prompts" or "options").

When using a custom component though, you are indeed right about the behavior. Will probably need to disable the deep merge when using a custom component.

[rstoenescu]

Changed merge strategy when using custom component.
Will be available in Quasar v1.14.1.

[yongwee]

Hi,

Not sure why github didn't notify me about your reply and I've near forgotten about this issue report that I've made 😓
Thanks for the explanation, it makes sense :)
Love the change that you made too, think it'll help people like me who use custom components with the dialog plugin quite heavily. Thanks for the great work you guys are doing!