fix($theme-default): dropdown should be close when foucsout (fix #2227)

[billyyyyy3320]

Summary

Fix #2227

Other approach is adding a foucsout event to the button.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[haoranpb]

Seems to break accessibility introduced in #1837

Try to use Tab to navigate to Learn More, and press Enter, the dropdown won't show now.

[billyyyyy3320]

Oops. So, it seems adding a foucsout event to the button will also break that feature, too.

It's more complicated than my first impression. Welcome to any thoughts.

[billyyyyy3320]

Nevertheless, AFAIK, there is no :blur pseudo-class in CSS

[Mister-Hope]

@newsbielt703 Your thoughts are a bit complicated. Why don't we just disable the pointer event since hover will do the job.

I think #2303 is fine.