[Tagging] Change behaviour of Tag Drawer on click outside

[ChrisChV]

"As a course author, I don't want to lose the edited tags if I click outside the tag drawer"

Design: Figma
Depends on #190

Acceptance Criteria

If the user clicks on the grey area outside of the tagging drawer AND there are unsaved changes (at least one added/removed tag):

a. The drawer does not close
b. The footer of the drawer animates to draw the user's attention to the actions (see Figma). Perhaps like Blink 2 at this link

Developer notes

• Only implement this on frontend-course-authoring screens.
• Possible ways to implement this:
  • Verify that no component of the drawer has been clicked, like this code. All components need to be mapped, it is complicated and susceptible to errors.
  • The Sheet component has a way of knowing if it has been clicked outside. We could add a parameter to use that function publicly

[ChrisChV]

@bradenmacdonald

[bradenmacdonald]

@ChrisChV What currently happens if the user clicks outside - their changes are lost? If so we need to fix this ASAP. If "nothing" happens, it's less urgent.

[bradenmacdonald]

@ChrisChV Actually from looking at the code, doesn't the blocking parameter already do what we want? If we set blocking={true if unsaved changes else false} that would at least prevent the users from losing their work, right?

[ChrisChV]

@ChrisChV Actually from looking at the code, doesn't the blocking parameter already do what we want? If we set blocking={true if unsaved changes else false} that would at least prevent the users from losing their work, right?

@bradenmacdonald Yes that solves this: a. The drawer does not close, but it is not possible to do this: b. The footer of the drawer animates to draw the user's attention to the actions

[bradenmacdonald]

@ChrisChV I see. Well if it's going to be a lot of work to implement the animation we may decide to do without it for now, until we get user feedback. But we definitely don't want users losing their work if they click off of the tag drawer.