Teacher tool: Restrict numerical inputs to no more than two digits #10168
Conversation
| const newValue = (e.target as any).value; | ||
| let newValue = (e.target as any).value; | ||
| if (newValue && filter) { | ||
| const pat = new RegExp(filter); |
There was a problem hiding this comment.
I'd suggest moving this RegExp to a state variable so it isn't recreated on each change.
There was a problem hiding this comment.
Moved it. Does it look okay?
|
In firefox in the upload target, I'm still able to type in non-numeric characters (behavior seems unchanged from current version). Not sure if the changes just didn't make it into the target or if it's not working for firefox...
|
It's possible the target was built from out of date code. With subapps like teacher tool there's a gotcha: before creating the target, you have to rebuild pxt (gulp) to build the production version of the subapp. |
|
It's working locally. I'll try fixing the upload target with Eric's tip. |
|
@thsparks try it now. I updated the upload target. |
| const [expanded, setExpanded] = React.useState(false); | ||
| const [pattern, setPattern] = React.useState(filter ? new RegExp(filter) : undefined); |
There was a problem hiding this comment.
Looks good, except I would avoid using the name pattern as the input element has an attribute by this name and we may want to expose it at some point. You could call it filter if you didn't destructure that value from props. Something like:
| const [pattern, setPattern] = React.useState(filter ? new RegExp(filter) : undefined); | |
| const [filter] = React.useState(opts.filter ? new RegExp(opts.filter) : undefined); |
|
Oh, one thing I just thought about is that this change will allow |
Our current placeholder is 0, so we'd need to change that too if we wanted to disallow 0. Maybe the placeholder should be 1? Either way, if we want to do this, I think we should make the changes in a future PR. |
…10168) * limit input to two digits * move reg exp to state variable * use 'filter' instead of 'pattern'
This PR restricts the numerical inputs so that only non-negative integers are allowed. Thanks to @srietkerk and @eanders-ms for all their help!
Fixes microsoft/pxt-microbit#5659, microsoft/pxt-microbit#5652, microsoft/pxt-microbit#5651, microsoft/pxt-microbit#5649, microsoft/pxt-microbit#5648
Upload target: https://makecode.microbit.org/app/39245c391c49d14a19f37fcdfe2949bbb3c6a7aa-dddb50c050--eval#