fix: add ActionType.CLEAR_FOCUS to indicate a user has left the field

[christopherhuii]

Summary

The ComboBox has issues with "losing" its focus when clicking outside of the component.

Screen.Recording.2021-02-18.at.1.49.43.PM.mov

A related issue is that the FocusMode is still set to FocusMode.Input even after the user has left the component.

This PR allows the user to:

1. Unfocus from the ComboBox when they click outside
2. Resets the FocusMode to None when they click outside

I achieved this by creating a new ActionType called CLEAR_FOCUS to indicate when a user has clicked outside of the combo box. I am open to suggestions on the name. This action is different from ActionType.CLEAR because CLEAR empties the input, whereas CLEAR_FOCUS indicates the user has left the field.

Related Issues or PRs

Fixes #901

How To Test

1. Open Storybook
2. Focus ComboBox by opening its options or typing in the input
3. Click outside of the component and the input should lose focus.

Screenshots (optional)

After Fix:

Screen.Recording.2021-02-18.at.2.13.02.PM.mov

[trussworks-infra-zz]

	Warnings
⚠️	This PR does not include changes to storybook, even though it affects component code.

Generated by 🚫 dangerJS against 727ed1f

[christopherhuii]

Maybe ActionType.BLUR is a better name?

[suzubara]

The changes & testing the component in Storybook look good to me! If they have time, I might look for a review from @haworku or @jim since they worked on the original component, but I feel pretty confident that this is an improvement.

Maybe ActionType.BLUR is a better name?

I agree!

[jim]

This looks good to me! Thanks for digging into this component and fixing this issue.