Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactivity broken for a rule dependency #16

Closed
martinszeltins opened this issue Dec 2, 2024 · 7 comments
Closed

Reactivity broken for a rule dependency #16

martinszeltins opened this issue Dec 2, 2024 · 7 comments

Comments

@martinszeltins
Copy link
Contributor

Reactivity broken for a rule dependency

I have a rule that depends on someCondition ref. When someCondition changes, the rule should be re-evaluated. However, it is not. However if I change the value of the field then the rule is re-evaluated.

Steps to reproduce:

  1. Enter weight value: 2
  2. Toggle the condition to be OFF
  3. The validation error should go away but it does not. == BUG 🐞 ==
  4. Enter weight value: 3
  5. Now the validation error is gone. (But it should have disappeared when we toggled the condition.)

Reproduction:
https://stackblitz.com/~/github.com/martinszeltins/regle-test-8

const extraWeightRule = (myArg: string, index: number) => {
    return withMessage(value => {
        return Number(value) > 1
            && someCondition.value === false
    }, t('totally_not_good', { name: myArg + index }))
}

const rules = computed(() => {
    return {
        shipmentItems: {
            $each: (item, index) => ({
                weight: {
                    extraWeightRule: extraWeightRule('weight banana', index)
                }
            })
        }
    }
})
@victorgarciaesgi victorgarciaesgi added the bug Something isn't working label Dec 2, 2024
@martinszeltins
Copy link
Contributor Author

Also, I think we should have automated tests for such cases.

@victorgarciaesgi victorgarciaesgi removed the bug Something isn't working label Dec 2, 2024
@victorgarciaesgi
Copy link
Owner

This is not a problem from regle, but reactivity on your side, as your dependency someCondition is inside a function, Vue can't collect the reference.

Use withParams specificaly for this case

const extraWeightRule = (myArg: string, index: number) => {
        return withMessage(
            withParams((value) => {
                return Number(value) > 1 && someCondition.value === false
            }, [someCondition]),
            t('totally_not_good', { name: myArg + index })
        )
    }

@victorgarciaesgi
Copy link
Owner

Also, I think we should have automated tests for such cases.

There is already tests on the parameters dependencies 👍

@victorgarciaesgi
Copy link
Owner

withAsync works the same way, as Vue can't collect dependencies on async functions

@martinszeltins
Copy link
Contributor Author

This is not a problem from regle, but reactivity on your side, as your dependency someCondition is inside a function, Vue can't collect the reference.

Use withParams specificaly for this case

@victorgarciaesgi Oh, I see. I think other people will run into the same "issue" and wonder why it is not working. Do you think we could add a separate section to the docs like "Reactivity caveats" or something like that to clearly explain this?

@victorgarciaesgi
Copy link
Owner

I think it's a good idea yeah!

@martinszeltins
Copy link
Contributor Author

👍🏻 closing this and opening a proper issue to track this in #17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants