Feature: Implement RENAME group in meatball menu in mobile header

nishiki-tech / nishiki-frontend

Nishiki is an app for tracking and sharing food inventories within groups for better pantry management.

https://nishiki.tech

MIT License

21 stars 5 forks source link

Feature: Implement RENAME group in meatball menu in mobile header #343

Closed ShoeheyOt closed 6 months ago

ShoeheyOt commented 6 months ago

Overview

Implement renaming group function in group single page

Screen Captures

rename-groupSingle.webm

Assignee Checklist:

[X] The naming convention of the PR title is correct (See the comment at the top of this template)
[X] The base branch is correct (See: Types of Branches)
[X] The branch name follows the Branch Naming Conventions
[X] The correct assignees and reviewers have been designated for this PR
[X] The coding style follows the Coding Style Guide
[X] All the related issues are associated with this PR
[X] All criteria in the associated issues are met (please tick the checkboxes)
[X] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

[ ] Double-check the "Assignee Checklist"
[ ] The code follows the generic best practices and our Coding Style Guide
[ ] The code is well-commented and easy to understand
[ ] The UI changes accurately reflect the provided design

nick-y-ito commented 6 months ago

@ShoeheyOt

I found a serious issue. When this drawer is open, the [ space ] and [ enter/return ] keys do not work. I guess it's being caused by the dropdown menu remaining in the background. Because the [ space ] and [ enter/return ] keys also have some functionality on the dropdown menu, the functionalities of the drawer and the dropdown menu are conflicting.

In the video, I pressed the [ space ] and [ return ] keys on both the input and buttons, but nothing happened. I also tried the same thing on my iPhone, but it caused the same issue.

I suppose the best solution is to avoid nesting the dropdown and the drawer.

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/45e6b047-ea72-4f8f-9494-83ee2fa1fa44

Additionally, after completing this PR, we may have to refactor all other nested components. The same issue, in which those keys do not function, happens on delete dialogs. Once we complete the restructuring, we will no longer need to use "onPrarentClose" things.

nick-y-ito commented 6 months ago

@kanta1207 I hope you will take a look at my comment above and share your opinion as well.

kanta1207 commented 6 months ago

@kanta1207 I hope you will take a look at my comment above and share your opinion as well.

I tried in my environment and found the same issue.

I tried to find some ways to solve this issue, but couldn't. Indeed, it looks like we need to restructure all of DropdownMenu + nested Drawer/Dialog to resolve this issue.

nick-y-ito commented 6 months ago

@kanta1207 @ShoeheyOt Thank you for your investigation. I assume we should separate this issue (https://github.com/nishiki-tech/nishiki-frontend/pull/343#issuecomment-1986922413).