Description
- seamapi/react v1.41.0
- Device IDs: 598a5a28-e314-4864-9b5d-3aba353b8587, 86483ac1-ba59-452c-8c0e-60d611928d73
Some components that are displayed correctly on our app fail to be displayed in a modal (In the default slot of a v-dialog https://v2.vuetifyjs.com/en/api/v-dialog/ ) with the following error in console:
https://legacy.reactjs.org/docs/error-decoder.html/?invariant=409
This error appears when the modal is opened.
If I close the modal and re-open it, the component is displayed correctly the second time.
Code:
<v-dialog :value="!!value">
<seam-device-details
:client-session-token="token"
:device-id="value"
/>
<v-dialog>Workaround
The workaround we found for now is to wrap the seam component in an element conditionally rendered (v-if) on an internal ready variable that is set to true soon after the modal is rendered.
The following code does not work if we remove the delay this.$nextTick and set the this.ready variable immediately.
This is not super clean but it works, so I removed the “Blocking” tag on this issue
watch: {
value (val) {
if (val && !this.ready) this.$nextTick(() => { this.ready = true })
},
},value is the prop set to the deviceId to enable the modal, and set to null to close the modal