-1

For some reason after the first time onChange doesn't run again.

onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                if (regex.test(e.target.value) === true) {
                  setFen(e.target.value);
                  chess.load(e.target.value);
                }
              }}

this is the code, I check a regex expression and change the state only if the condition is met. I've tried checking with a bunch of console.logs and it just fires the first time.. This is inside a Ant Design Input component. Hope I was clear enough, ask me if you need more info!

Edit: Okay I solved: basically I've checked my regex behaviour and tried removing /g and now everything works fine. Apparently with global flag, it forwards the regex's internal index to the last found position + 1 (in case of hello, that'd be 5) and only once it tests false, will it reset back to 0.

amongosus
  • 1
  • 2
  • What if you comment out the if statement and its contents and instead just `console.log('something');` onChange? I'm guessing it doesn't have anything to do with regex. – Rocky Sims May 07 '22 at 16:36
  • okay I've tried just that and apparently it works correctly, the condition isn't met after the first time. Basically I've tried adding 2 console logs one inside and one outside of the regex condition and apart from the first time only the outside log gets executed @RockySims – amongosus May 07 '22 at 16:40
  • the onChange works just fine, the condition gets stuck? – amongosus May 07 '22 at 16:40
  • Okay, try adding `console.log(e.target.value);` just before the `if`. – Rocky Sims May 07 '22 at 16:44
  • Okay I figured out that if I copy and paste the input it doesn't work, if I type it then it works just fine. Do you have any idea why is that? – amongosus May 07 '22 at 16:49
  • I don't think onChange triggers until the input loses focus... but I'm not sure if that's whats happening here. – Rocky Sims May 07 '22 at 16:51
  • the regex condition shows a very inconsistent behaviour: basically the logs always work but the condition sometimes isn't met, often when the input value is very similar to the one there was before. So outside of the condition everything is fine and onChange gets called everytime but the inside doesn't, unless I type the exact same value by hand instead of copypasting it. – amongosus May 07 '22 at 16:55
  • Does the `console.log(e.target.value);` just before the `if` log the correct value even when you paste (instead of type) into the input box? – Rocky Sims May 07 '22 at 16:57
  • yes @RockySims, only the condition isn't met even if it's valid – amongosus May 07 '22 at 16:59
  • Okay, try adding `console.log(regex.test(e.target.value));` just above the if but after the `console.log(e.target.value);`. You might also add `console.log(regex);` just to be extra sure `regex` hasn't changed. – Rocky Sims May 07 '22 at 17:01
  • One other thing that might be worth a try is to add `console.log(typeof(e.target.value));` since sometimes a value can look right but be of the wrong type. – Rocky Sims May 07 '22 at 17:03
  • ok very interesting behaviour, now that I've added the `console.log(regex.test(e.target.value))` right before the if the console.log always works but the condition right after doesn't get exectued. So I'd have a log like: "outside if"; true; and then nothing because it doesn't execute the if even if the condition is met – amongosus May 07 '22 at 17:06
  • Okay, try adding `console.log(regex.test(e.target.value) === true);` above the `if`. – Rocky Sims May 07 '22 at 17:09
  • Also make sure your `console.log('inside if');` is the first line of code inside the if. – Rocky Sims May 07 '22 at 17:09
  • ok I'm confused : I have 2 lines before the if: `console.log(regex.test(e.target.value));` and `console.log(regex.test(e.target.value) === true);`, the log is: true; false; what am I missing? I've tried using only `==` instead of `===` – amongosus May 07 '22 at 17:11
  • Try adding `console.log(typeof(regex.test(e.target.value)));` in case its due to a type mismatch. – Rocky Sims May 07 '22 at 17:12
  • 1
    boolean, I've tried logging the exact same condition like that: `console.log(regex.test(e.target.value)); console.log(regex.test(e.target.value));` and I get `true; false;` – amongosus May 07 '22 at 17:14
  • Wow... that is weird. Okay, try adding `console.log(e.target.value);` between the two `console.log(regex.test(e.target.value));` lines. – Rocky Sims May 07 '22 at 17:17
  • 1
    okay I think I found it, basically I've checked my regex behaviour and tried removing /g and now everything works fine. Apparently with global flag, it forwards the regex's internal index to the last found position + 1 (in case of hello, that'd be 5) and only once it tests false, will it reset back to 0. – amongosus May 07 '22 at 17:21
  • Nice one. Sounds like you've figured it out. – Rocky Sims May 07 '22 at 17:22
  • Probably lack of context. You didn't post enough code for anyone to be able to reproduce the problem and really understand what's happening. For instance, you didn't post the regex string so no one looking at your question could have spotted the `/g` that was actually causing the problem. – Rocky Sims May 07 '22 at 17:25
  • well yeah, it makes sense. Thanks again for taking the time to help me!! – amongosus May 07 '22 at 17:31

0 Answers0