fix: support numbers selection for PowerSelect component

ember-power-select/package.json

@@ -164,7 +164,8 @@
       "./components/power-select/search-message.js": "./dist/_app_/components/power-select/search-message.js",
       "./components/power-select/trigger.js": "./dist/_app_/components/power-select/trigger.js",
       "./helpers/ember-power-select-is-equal.js": "./dist/_app_/helpers/ember-power-select-is-equal.js",
-      "./helpers/ember-power-select-is-group.js": "./dist/_app_/helpers/ember-power-select-is-group.js"
+      "./helpers/ember-power-select-is-group.js": "./dist/_app_/helpers/ember-power-select-is-group.js",
+      "./helpers/ember-power-select-is-selected-present.js": "./dist/_app_/helpers/ember-power-select-is-selected-present.js"
     }
   }
 }

ember-power-select/src/components/power-select.ts

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action, get } from '@ember/object';
 import { addObserver, removeObserver } from '@ember/object/observers';
 import { scheduleOnce } from '@ember/runloop';
-import { isEqual } from '@ember/utils';
+import { isEqual, isNone } from '@ember/utils';
 import { assert } from '@ember/debug';
 import {
   indexOfOption,
@@ -299,7 +299,7 @@ export default class PowerSelectComponent extends Component<PowerSelectSignature
     if (this._resolvedSelected) {
       return toPlainArray(this._resolvedSelected);
     } else if (
-      this.args.selected &&
+      !isNone(this.args.selected) &&
       typeof this.args.selected.then !== 'function'
     ) {
       return toPlainArray(this.args.selected);
@@ -450,7 +450,7 @@ export default class PowerSelectComponent extends Component<PowerSelectSignature
 
   @action
   _updateSelected(): void {
-    if (!this.args.selected) return;
+    if (isNone(this.args.selected)) return;
     if (typeof this.args.selected.then === 'function') {
       if (this._lastSelectedPromise === this.args.selected) return; // promise is still the same
       if (
@@ -502,7 +502,7 @@ export default class PowerSelectComponent extends Component<PowerSelectSignature
 
   @action
   _highlight(opt: any): void {
-    if (opt && opt.disabled) {
+    if (!isNone(opt) && opt.disabled) {
       return;
     }
     this.highlighted = opt;
@@ -765,7 +765,7 @@ export default class PowerSelectComponent extends Component<PowerSelectSignature
         this.storedAPI.options,
         this.storedAPI.highlighted,
       );
-    } else if (!this.storedAPI.isOpen && this.selected) {
+    } else if (!this.storedAPI.isOpen && !isNone(this.selected)) {
       searchStartOffset += indexOfOption(this.storedAPI.options, this.selected);
     } else {
       searchStartOffset = 0;

ember-power-select/src/components/power-select/trigger.hbs

@@ -1,4 +1,4 @@
-{{#if @select.selected}}
+{{#if (ember-power-select-is-selected-present @select.selected)}}
   {{#if @selectedItemComponent}}
     {{#let (component (ensure-safe-component @selectedItemComponent)) as |SelectedItemComponent|}}
       <SelectedItemComponent

ember-power-select/src/helpers/ember-power-select-is-selected-present.ts

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+import { isNone } from '@ember/utils';
+
+export function emberPowerSelectIsSelectedPresent([value]: [any]): boolean {
+  return !isNone(value);
+}
+
+export default helper(emberPowerSelectIsSelectedPresent);

test-app/tests/integration/components/constants.js

@@ -34,6 +34,8 @@ export const numerals = [
   '853',
 ];
 
+export const digits = [0, 2, 3, 5, 7, 11, 13, 17, 19, 23, 853];
+
 export const names = [
   'María',
   'Søren Larsen',

test-app/tests/integration/components/power-select/general-behaviour-test.js

@@ -18,7 +18,7 @@ import RSVP from 'rsvp';
 import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 import { run, later } from '@ember/runloop';
-import { numbers, names, countries } from '../constants';
+import { numbers, names, countries, digits } from '../constants';
 import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 import ArrayProxy from '@ember/array/proxy';
 import ObjectProxy from '@ember/object/proxy';
@@ -1621,5 +1621,36 @@ module(
 
       //TODO: also try starting from non-null value and maybe also going back to null?
     });
+
+    test('works with numbers', async function (assert) {
+      assert.expect(3);
+
+      this.selected = digits[0];
+      this.digits = digits;
+      await render(hbs`
+      <PowerSelect @options={{this.digits}} @selected={{this.selected}} @onChange={{fn (mut this.selected)}} as |option|>
+        {{option}}
+      </PowerSelect>
+    `);
+
+      assert
+        .dom('.ember-power-select-trigger')
+        .hasText(`${digits[0]}`, 'number "0" is shown in the trigger');
+
+      await clickTrigger();
+
+      assert
+        .dom('.ember-power-select-option[aria-current=true]')
+        .hasText(
+          `${digits[0]}`,
+          'The option containing "0" has been highlighted',
+        );
+
+      await click('.ember-power-select-option:nth-child(4)');
+
+      assert
+        .dom('.ember-power-select-trigger')
+        .hasText(`${digits[3]}`, 'number "5" is shown in the trigger');
+    });
   },
 );