kylelhk / Pictionary

CITS5505 Agile Web Development - Group Project
MIT License
1 stars 0 forks source link

Handle scenario when user clicks outside modal continuosly. #99

Open iheathers opened 2 months ago

iheathers commented 2 months ago

Reported by @kylelhk on #98

In the Create Drawing page, when the page is initially loaded and a user clicks outside of the word category modal, then clicks outside of the confirmation modal, the drawing canvas is displayed. What should happen instead is that the confirmation should be shown again.

This bug was initially thought to have been fixed in #69, however that only partially solved the issue.

kylelhk commented 2 months ago

Future plan for solving the issue in Create Drawing page

Reproduce the issue: Load the Create Drawing page, click outside the word category modal, then click outside the confirmation modal.

Review the existing fix: Analyse the changes made in issue #69 to understand why the solution only partially resolved the problem.

Possible solutions:

  1. Modal interaction management: Implement a comprehensive modal management system to ensure that clicking outside one modal correctly triggers the appropriate modal behaviour. Use event listeners to detect clicks outside the modals and ensure the confirmation modal is shown again if dismissed incorrectly.

  2. State management: Utilise a robust state management approach to track the state of modals. Ensure that the state correctly reflects whether the confirmation modal should be displayed.

  3. User flow and UX: Enhance the user experience by providing clear visual cues and transitions between modals to avoid confusion.

Implementation:

  1. Code changes: Update the modal components to include the necessary event listeners and state management logic. Ensure the confirmation modal is re-displayed if the user clicks outside of it.

  2. Testing: Write unit tests and integration tests to verify that the modals behave as expected under various scenarios. Conduct thorough manual testing to ensure the fix resolves the issue completely.

  3. Review and deployment: Conduct a code review to ensure the changes meet coding standards and address the issue effectively. Deploy the changes to a staging environment for further testing before deploying to production.