unpoly · GitHub

Hi all! I'm just getting started with Unpoly, and I'm having a great time with it, so thanks!

However I've hit a snag where I'm unsure how to troubleshoot:

I'm using Shoelace web components. In an Unpoly modal I have a form with Shoelace form components such as <sl-input> and <sl-button>. When the form is submitted using the Enter key, and there is server validation such that the server responds with 422 and a HTML response, the following error is printed in the console:
Uncaught (in promise) up.CannotMatch: Could not find a layer to render in. You may have passed an unmatchable layer reference, or a detached element.
When the form is submitted using a click on the <sl-button>, everything works as expected.

I have reproduced the problem in a Glitch: https://glitch.com/edit/#!/teal-spurious-join

To reproduce:

  1. Open modal
  2. Type anything but the letter 'x' in the form input under "Shoelace form compoents".
  3. Submit form using the Enter key

What I expect:
That the modal updates with the HTML returned from the server. The message "Not x" should be displayed just under the text input.

What actually happens:
The form is submitted, but the response is not rendered. Instead there is an error in the browser console: Uncaught (in promise) up.CannotMatch: Could not find a layer to render in. You may have passed an unmatchable layer reference, or a detached element.

When the form is submitted using a click on the Submit button, I get the expected result.

I'd love to hear your thoughts on how I might approach this problem, and if any of you have gotten Shoelace form components to work with Unpoly?

Read the original on github.com ↗