Set focus on the ManageList's inputs when users navigate to them using the List's buttons #78
Conversation
- Add an optional parameter in the managelist route to use it to programatically set focus on the inputs when users navigate to it using the buttons in the List view. - Remove selected property in the Select input first's option to avoid console warning
|
Visit the preview URL for this PR (updated for commit 5fc3dd0): https://tcl-71-smart-shopping-list--pr78-set-focus-e6j0myx6.web.app (expires Fri, 26 Apr 2024 13:37:05 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4 |
There was a problem hiding this comment.
Hey @vivitt! Awesome, works perfectly and I like the use of params for the functionality. Left a couple comments marking a leftover console.log and missing dependencies on the useEffect. Thank you!!
| @@ -199,6 +203,8 @@ export async function deleteList(userId, userEmail, listPath, listId) { | |||
| // Delete list doc | |||
| const listCollectionRef = collection(db, userId); | |||
| const listDocumentRef = doc(listCollectionRef, listId); | |||
| const itemsCollectionRef = collection(listDocumentRef, 'items'); | |||
| console.log(itemsCollectionRef); | |||
There was a problem hiding this comment.
Leftover console.log ^^
| } else if (param === Params.Share) { | ||
| shareListInput.current.focus(); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
34:5 warning React Hook useEffect has a missing dependency: 'param'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Getting this warning, missing param on the dependency array.
Description
We added buttons below the filter input to enhance app navigation and provide users with a more intuitive way to access the 'Add Items' or 'Share List' forms.
To make the user experience smoother and improve accessibility, this PR adds an optional parameter to the manage-list route. This parameter is used to programmatically set focus on the inputs when users navigate to them using any of the buttons in the List view to add an item or share a list.
Additionally, this change removes the 'selected' property from the first option of the 'Select time' input to avoid a console warning.
After applying these changes:
Type of Changes
Updates
Before
Navigation
Screen.Recording.2024-04-19.at.15.27.14.mov
Warning
After
Navigation
Screen.Recording.2024-04-19.at.15.26.31.mov
Warning
Testing Steps / QA Criteria
To test changes locally, pull the
set-focusbranch from this repo:git checkout -b set-focusgit pull origin set-focus