-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Prevent entering invalid values in the Query Loop block config #33285
Conversation
Size Change: -2 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's go with this one that checks other inputs as well. Although the crashing comes only from perPage
due to the logic for initial setup of this attributes, which should be handled better in this issue.
Thanks Riad
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To match the HTML API, the min and max should be inclusive of the validated value, not exclusive as you have it here.
Demo here: https://codesandbox.io/s/empty-platform-h2qvj?file=/src/App.js
Also I created an issue to add a baseline validation based on the min/max
props: #33291
I think they are inclusive in this PR (unless I'm misunderstanding). The codepen link seems wrong. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm sorry, I misread the code, you already have it as inclusive of the min and max, never mind, LGTM!
It seems like the gutenberg/packages/components/src/number-control/test/index.js Lines 68 to 96 in dacdf41
Ahhhh but it doesn't "clamp" on blur, only on key down 🤔 |
@sarayourfriend interesting! even in keydown (which I didn't experience) it sounds weird/wrong to me, what if the limit is 100 < x < 200 and I type something like For 5.8, I'm going to land this stop gap solution and we should fix this properly in #33291. |
Oh it's only on the Enter key down, not any key down. So you can finish your number being input for sure, but when you hit enter it will "clamp" the value. It even seems like it's meant to do the same thing on blur as well: gutenberg/packages/components/src/input-control/input-field.js Lines 92 to 109 in ad0cc77
Notice how it calls In any case, this will take some digging to discover the correct solution to it. It doesn't seem like it should take much new code to fix this problem. |
6c07e2b
to
ba43743
Compare
ba43743
to
161e000
Compare
closes #33270
Right now, you can enter
0
in the Query Loop per page config which will result in an infinite loop breaking the block.This PR fixes that by adding some validation to the Query Loop Config inputs.
This more a stop gap fix for 5.8. I think a better solution would be to do that validation automatically in the
NumberControl
component. I tried this quickly but felt a bit impactful for 5.8 given how complex that component looks (not sure if that complexity is needed tbh) so I think I'd rather leave this for our components devs if you all have time, what do you think @ciampo @sarayourfriend.Testing instructions