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 |
BikeMouse
left a comment
BikeMouse
left a comment
There was a problem hiding this comment.
Thank you very much for this! Great work there :)
ocsiddisco
left a comment
ocsiddisco
left a comment
There was a problem hiding this comment.
Thank you for the update Viviana! It is a nice add!
As mentioned on Slack, there is only the part regarding the option in select disappearing that bothers me, but it can be improved with 'required' on select and empty value for the option.
borjaMarti
left a comment
borjaMarti
left a comment
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!!
| 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