react-querybuilder/react-querybuilder

Validation styles not appearing

dglassick opened this issue · 9 comments

Hello,

I'm using the Chakra build of React Query Builder.

I believe there is an issue with the validation styles not applying. I was also using the simple validator function that is in the fields file in the demo to test validation. Based on the demo's .scss file, there should be a class validateQuery that is applied to the root container that doesn't seem to be there, even when using the validator prop. I added the validateQuery class to the controlClassnames prop, which added the class to the parent div element. I also had to delete the .queryBuilder class in the .scss file in order for the validation classes to have an effect on the styling.

After making the changes that I did above the purple errors were showing up.

Hey, thanks for the report. This is just a bug in the demo styles, right? Not a bug in RQB itself?

I believe so, but entirely sure. Adding validatorQuery to the controlClassnames works, maybe that just needs to be added to the code in the demo to similar to how queryBuilder-branches is? I guess the question is, is that validatorQuery class supposed to be a part of the root container or not? Was that class just used for the demo? If so then it's a bug with the demo code.

I'm thinking it's an issue with your implementation. Can you provide a sample repo or sandbox? Click here to open the Chakra example on CodeSandbox (or StackBlitz).

In other news, I checked the Chakra demo and saw that the branch lines weren't showing up, but they do for all the other style libraries. I'll get that fixed.

I'm sorry, got really busy yesterday preparing for a winter storm. I'll be sure to send the sandbox today sometime.

I'm sorry, got really busy yesterday preparing for a winter storm. I'll be sure to send the sandbox today sometime.

No rush. Stay warm!

FYI the branch styles on the Chakra demo are fixed.

I saw that you closed this. Did you get the issue figured out?

So I had a solution from the beginning, it's just the solution I had was pretty different than what the documentation suggested.

I figured I might as well close the issue since I keep forgetting to make the sandbox. I just didn't want you to feel there is an outstanding issue.

Sounds good. If your solution is interesting enough, please share! Honestly I haven't seen a lot of RQB implementations in the wild, so it might be a good learning experience for me. :)