Prerequisite: Must be started only after Part 1 is complete and merged
With the controllable timeout mechanism available from Part 1, this task involves integrating it into the DefinitionDialog component to achieve the desired user experience.
Acceptance Criteria:
-
When the DefinitionDialog becomes visible, the 5-second auto-hide timer should start automatically.
-
If the timer successfully completes its 5-second countdown without interruption, the dialog should close.
-
If the user's mouse pointer enters the DefinitionDialog area (onMouseEnter event), the timer must be stopped to prevent the dialog from closing.
-
If the user's mouse pointer leaves the DefinitionDialog area (onMouseLeave event), the 5-second timer should be reset (i.e., it starts counting down from 5 seconds again).
-
The dialog should still close immediately if the user clicks outside of it or selects another word.
Acceptance Criteria:
When the DefinitionDialog becomes visible, the 5-second auto-hide timer should start automatically.
If the timer successfully completes its 5-second countdown without interruption, the dialog should close.
If the user's mouse pointer enters the DefinitionDialog area (onMouseEnter event), the timer must be stopped to prevent the dialog from closing.
If the user's mouse pointer leaves the DefinitionDialog area (onMouseLeave event), the 5-second timer should be reset (i.e., it starts counting down from 5 seconds again).
The dialog should still close immediately if the user clicks outside of it or selects another word.