<div
  class="locale-chooser"
  data-test-locale-chooser
  {{handle-click-outside this.close}}
>
  <button
    type="button"
    class="toggle"
    aria-haspopup="true"
    aria-expanded={{if this.isOpen "true" "false"}}
    aria-labelledby="{{this.uniqueId}}-locale-chooser-title"
    data-level="toggle"
    data-test-toggle
    {{on "click" (toggle "isOpen" this)}}
    {{on "keydown" (fn this.toggleMenu)}}
  >
    <FaIcon @icon="globe" />
    <span id="{{this.uniqueId}}-locale-chooser-title">
      {{t (concat "general.language." locale.id)}}
    </span>
  </button>
  {{#if this.isOpen}}
    <div
      class="menu"
      role="menu"
      {{ref this "menuElement"}}
      {{did-insert this.focusOnFirstItem}}
    >
      {{#each this.locales as |loc|}}
        <button
          type="button"
          role="menuitemradio"
          lang={{loc.id}}
          tabindex="-1"
          aria-checked={{if (eq locale.id loc.id) "true" "false"}}
          data-level="item"
          data-test-item
          {{on "click" (fn this.changeLocale loc.id)}}
          {{on "keydown" (fn this.moveFocus)}}
          {{on "mouseenter" (fn this.clearFocus)}}
        >
          {{loc.text}}
        </button>
      {{/each}}
    </div>
  {{/if}}
</div>

<div
  class="locale-chooser"
  data-test-locale-chooser
  {{on-click-outside this.close}}
>
  <button
    type="button"
    class="toggle"
    aria-haspopup="true"
    aria-expanded={{if this.isOpen "true" "false"}}
    aria-labelledby="{{this.uniqueId}}-locale-chooser-title"
    data-level="toggle"
    data-test-toggle
    {{on "click" (toggle "isOpen" this)}}
    {{on "keydown" (fn this.toggleMenu)}}
  >
    <FaIcon @icon="globe" />
    <span id="{{this.uniqueId}}-locale-chooser-title">
      {{t (concat "general.language." locale.id)}}
    </span>
  </button>
  {{#if this.isOpen}}
    <div
      class="menu"
      role="menu"
      {{ref this "menuElement"}}
      {{did-insert this.focusOnFirstItem}}
    >
      {{#each this.locales as |loc|}}
        <button
          type="button"
          role="menuitemradio"
          lang={{loc.id}}
          tabindex="-1"
          aria-checked={{if (eq locale.id loc.id) "true" "false"}}
          data-level="item"
          data-test-item
          {{on "click" (fn this.changeLocale loc.id)}}
          {{on "keydown" (fn this.moveFocus)}}
          {{on "mouseenter" (fn this.clearFocus)}}
        >
          {{loc.text}}
        </button>
      {{/each}}
    </div>
  {{/if}}
</div>

Switch to community supported click outside
Switch to community supported click outside

handle-click-outside is being removed from common in favor of this
community solution.
