Add item section toggle 89

flbarfield commented 5 months ago

Description

Added a toggle feature to list view's add item section

Clicking the button will cause the section to toggle downwards into an expanded view, and clicking the button again will toggle it back upwards into a minimized view.

While the animation works smoothly going down, I seem to be having trouble getting it back upwards in the same manner...Happy to implement suggestions on fixing that bit! But I don't think it's app-breaking if the animated up-toggle isn't done.

Related Issue

closes #89

Acceptance Criteria

Button hides and expands Add Item form on list view.

Type of Changes

Enhancement

Updates

addItem

Testing Steps / QA Criteria

With a list selected, navigate to the list view. Click the toggle button next to "Add Item"

github-actions[bot] commented 5 months ago

Visit the preview URL for this PR (updated for commit 626f98e):

https://tcl-67-smart-shopping-list--pr98-additem-section-togg-0149g69i.web.app

_{(expires Sat, 06 Apr 2024 12:43:41 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1dc6f6876568bd8a1c97781eec7984835c207f7c}

flbarfield commented 5 months ago

Good job on this Ricky! I am seeing one strange thing - when I click the 'Add item' button to submit a new item, the form stays displayed after submission, but when I hit the enter key to submit a new item, the form gets toggled and disappears right away. It seems like the new handleAddItemToggle function is somehow getting run on submit, but only when the enter key is hit.

https://www.loom.com/share/41be12c7f14d431fab45935a3357d136?sid=8c9d5c4f-560e-4e76-b814-204853f83e26

I tried a few things (adding type="button" to toggle button, adding e.preventDefault() to handleAddItemToggle function) and nothing worked, so I wonder if @bdanzer or @adidalal have any ideas?

Good catch, Jenny! I also noticed that I could tab through all the contents of the hidden elements within the addItem section, thanks to that find! But that should be fixed now, and submittal is no longer possible while pushing enter if the focus is within the name field, as we want them to set reminder duration anyway before submittal

the-collab-lab / tcl-67-smart-shopping-list