Imperative `isCrosswordCorrect()` function returns `false` after web page reloads

[gitname]

Thanks for sharing this package!

I think I have run into a bug related to checking whether the crossword is correct.

When I fill in all the grid cells with correct letters and then call the imperative isCrosswordCorrect() function, the function returns true. That is what I expect it to do.

crosswordRef.current.isCrosswordCorrect(); // returns true ✅ 

However, when I then reload the web page (which leads to the grid being automatically re-populated with the same, correct letters) and then I call that same function again, the function returns false, whereas I expect it to return true since all the grid cells are still populated with correct letters.

crosswordRef.current.isCrosswordCorrect(); // returns false 😞 

At this point, if I call the imperative reset() function, fill in all the grid cells with the correct letters again, and then call the imperative isCrosswordCorrect() function again, the latter function once again returns true.

crosswordRef.current.reset();

crosswordRef.current.isCrosswordCorrect(); // returns true ✅ 

---

Here's some information about the environment in which I observed this:

• OS: Windows 10
• Browser: Google Chrome Version 100.0.4896.88 (Official Build) (64-bit)
• @jaredreisinger/react-crossword version: 4.3.2
• React version: 17.0.2

[YannikSood]

Did you figure this out? Thanks

[YannikSood]

@JaredReisinger any idea how to fixthis issue? I am passing crosswordRef to CrosswordProvider:

const crosswordRef = useRef<CrosswordProviderImperative>(null);

<CrosswordProvider data={data} ref={crosswordRef}> 

And i have a button, submit, where I do the following:

function handleSubmit() {
    console.log(crosswordRef.current?.isCrosswordCorrect());
    crosswordRef.current?.reset()
  }

The reset works fine.

But even when the crossword is filled accurately, still logging false. Thanks

[gitname]

@YannikSood, no, I haven't revisited the issue since opening this GitHub Issue.

The issue you described may be different from the one I described. In the one I described, the isCrosswordCorrect() function does return true before the page reloads, but it returns false after the page reloads (even though the puzzle remains filled correctly). In the one you described, I don't know whether the function ever returns true or whether a page reload comes into play.

[gitname]

Today, I observed the same symptom (i.e. the crossword "forgetting" that is already contains the correct answers) without reloading the page.

I was rendering the crossword within a MUI Drawer with the keepMounted prop set to true. When I solved the crossword and invoked isCrosswordCorrect(), the function returned true as I expected. Then, I closed and reopened the drawer (note: the web page, itself, remained loaded the entire time). Since keepMounted was true, the crossword still showed the letters I had previously entered. However, at this point, when I called isCrosswordCorrect(), the function returned false.

[JaredReisinger]

@gitname, thank you for the very-detailed repro case! I can look into this; my initial guess is that the "everything is correct" state is getting set during the "a letter has changed" processing, and isn't getting set when loading the state from the browser's local storage. 🤞🏼 it should be fairly easy to track down.

I think the non-page-reloading example is still causing the component to unmount and then remount, which would look exactly the same as a page reload as far as the component was aware. If that's true, the same fix will take care of this scenario as well.

[JaredReisinger]

... and sure enough, digging into the guess-loading code, I see a comment I left for myself:

      if (useStorage) {
        loadGuesses(newGridData, storageKey || defaultStorageKey);
        // TODO: find correct answers...
      }

So, yeah... I need to "find correct answers"! :facepalm:

[github-actions[bot]]

:tada: This issue has been resolved in version 5.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[gitname]

Thanks, @JaredReisinger! I'll test out the newly-released behavior next time I work on my project (which I think will be a few weeks from now due to some other tasks having a higher priority to me at the moment).