hybridly: Form Errors Reactivity & Nested Fields Errors

Describe the bug

There is def. something weird with the errors and im not sure yet why, but ill leave this issue to follow up

  • The first i noticed while investigating some time ago, is that errors behave in a weird way in hybridly ( and a bit different from inertia ), when the backend sends the same error twice for a specific field, the errors variable is not triggered again ( and makes sense since the message is the same, and so the value never changes, so it will not trigger the watch effect. I believe this is related to original issue, reason why i wanted to mention.

  • Seems like when using nested fields in forms, if we submit and the field has an error, the error is correctly set and all good here, but if you attempt to fill the said field ( so it does not contain errors ), the form.errors for that specific field seems like its never removed, while the server sends back a response without the given error shared. Its expected that also nested fields are also cleared when they are not present.

  • Please do note that is also breaks the watch effect, so if you have a v-if for the given error, it will always be shown, because the variable is never removed.

The only way to proper workaround this is to use the before hook to clear the given fields, but i believe this should be looked properly to have a smooth expirience.

To note also that nested fields errors must be accessed with form.errors['foo.nested'] instead of dot notation, ( not 100% sure but i believe it would be a nice DX to provide nested navigation for those as well.

Reproduction

https://github.com/nikuscs/hybridly-demo-validation-errors

Steps to reproduce

  • Visit the https://blue-bird.test/login
  • First submit without the nested field so it the error is flashed
  • Then fill the contents of nested field and send again
  • Errors for the given field will not be sent back by the server, but still persisted in errors
  • Watch console for proper errors.

System information

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 201.41 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.8.0 - ~/Library/Caches/fnm_multishells/68334_1681237407108/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.2.0 - ~/Library/Caches/fnm_multishells/68334_1681237407108/bin/npm
  Browsers:
    Brave Browser: 112.1.50.114
    Chrome: 111.0.5563.146
    Firefox: 110.0
    Safari: 16.4

Used package manager

pnpm

Logs

No response

Validations

  • Read the docs.
  • Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
  • Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue…). For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
  • Check that this is a concrete bug. For Q&A, join our Discord server.
  • The provided reproduction is a minimal reproducible example of the bug.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 15 (15 by maintainers)

Most upvoted comments

FYI, I have started looking into this.

FWIW I use an absolute path, not a relative one, and it’s the path to /hybridly/packages/hybridly, not /hybridly/packages/hybridly/dist