search

laravel / nova-issues

553 stars 34 forks source link

Inputs throwing error, redirecting to edit page in custom resource tool (card or tool) #1425

Closed thegregthomp closed 5 years ago

thegregthomp commented 5 years ago

I'm working on a Resource Tool and I noticed a very strange bug. I added a 3rd party wyswig library that works with view called vue-wysiwyg. When typing in the wyswig it randomly will throw a console error Uncaught TypeError: Cannot read property 'innerHTML' of undefined. The strangest part is that the page then reloads into the edit portion of that resource. I thought this was a product of the plugin but I tried it with a different Vue.js wyswig (ckeditor) and it did the exact same thing. I can find any specific repeatable pattern to create the issue but just that it happens almost every time, at some point while typing in the field.

thegregthomp commented 5 years ago

I've now tried a third different wyswig, quill and get a different but similar error Cannot read property 'children' of undefined

thegregthomp commented 5 years ago

I surmise that this has something to do with Nova's instance of a the trix editor and some sort of clash. I was able to use the built in Trix editor but it's not a vue instance and had to wire in data binding.

thegregthomp commented 5 years ago

I take this back, this issue even persists using the native trix fields!

davidhemphill commented 5 years ago

It sounds like you haven't stopped the propagation of keydown events up to the global handlers for resources, search, etc. Make sure you're doing that.

thegregthomp commented 5 years ago

@davidhemphill thanks so much for your time, I'm losing my mind on this one. Is there any documentation on this or more details as to why/how/what? Maybe even a lose example of what someone else is doing?

Here's an example I found of a tool using quill-editor, which I tried at one point to no avail. https://github.com/dniccum/nova-custom-email-sender/blob/master/resources/js/components/MessageForm.vue

I'm not sure his tool doesn't suffer from this issue but I tried to replicate what he did and got this error. Thanks.

thegregthomp commented 5 years ago

@davidhemphill I re-wrote the title for future searchers. I found the solution thanks to your help. The image below highlights the keydown method you spoke of and it's clearly in novas default components. This is a screenshot from the Trix component at nova/resources/js/components/Trix.vue.

image