Fullstackopen part 5: createRef and forwardRef causing problems with autofocus

Dre — Fri, 22 May 2020 18:17:36 +0000

Hi, I'm currently in part 5 of the University of Helsinki fullstackopen course.

I'm not officially enrolled, (not even sure how to do that) and this fact is relevant - and I'm fine with it - because it lets me be free to take as long as I wish to complete each part of the course.

I don't know if I am a slow learner or not, but one reason my progress is slow, is because I insist on understanding each concept that is introduced, and I test myself by attempting to use each new thing on a different app. In addition to doing the exercises, I keep a third & fourth app updated with new features.

This practice has, I believe, resulted in gradually achieving deeper understanding and more confidence that I actually learned the lesson.

HOWEVER...

It has also caused me, on more than one occasion, to become deeply frustrated and on the verge of despair, when I am unable to successfully replicate a feature in a slightly different way. Sometimes I try to expand on a feature in the exercise app (the blog list) by using it in a slightly different way, and/or I try to replicate it in a different app (like the notes and phonebook apps from the earlier exercises).

The problem I am currently working on, and the reason for this post, is the createRef() function introduced in part 5b.

I was already using useRef to make the focus on initial render to be in the new note input, so that immediately when the page loads, you can just start typing, since that was the only field on the page at that moment.

Now, after using createRef to handle the toggle functionality, my useRef focus does not work any more, and I have spent the entire last two days (I'm not working, so I actually work on this all day, every day) trying to learn how to use createRef, useRef, and forwardRef. It's tricky because the toggle hides and unhides the login and the new note forms, which, in my opinion, should also be auto focused on the username and then new note fields, when each comes into view (this happens separately; I'm not trying to autofocus two things that are rendered at the same time).

Hundreds of google and stackoverflow searches have produced nothing but the most basic implementation; meaning, they work for a single component, but break when the component is factored out, or, it is only used for a single form on a single page.

What I have now is a situation where I need to use these refs in two different ways, and I have tweaked the code at least 100 different ways that seemed to make sense, but nothing works - meaning, I can either have the toggle functionality, or the auto focus, but not both. I want focus to happen when the login button or the new note button is clicked.

Important note: I am using strictly functional components and not class components. I understand that using refs with functional components requires useEffect, since there is no mount/unmount. I am not interested in having a hybrid app with both functional and class components (does anyone actually do that? Maybe I'm wrong?). I am convinced that there must be a way to make this work, or perhaps there is a package that can help with auto focus? I try to avoid adding packages unless absolutely necessary, but this problem is super frustrating, and I'm about ready to move on.

Here are the links to my frontend repo, backend repo, and the heroku deployed notes app. There are usernames and passwords in the .rest file on the backend, but if you just want to try out the heroku app, you may use username: Bart_Simpson with password: password and that should work. If you want to clone the repos to try them out, you need a mongodb database to connect to in order for it to work.

When I figure out this focus problem, the next thing I need to do is figure out how to expire the jwt tokens. I have added code that looks like it's supposed to make the token expire in 1 hour, but it doesn't. Logging out does indeed remove the locally stored token, for me anyway.

In the meantime, I guess I'll be doing some deep dives into how the DOM works with react, and perhaps this article will help.

DEV Community: Dre

Fullstackopen part 5: createRef and forwardRef causing problems with autofocus