allow for proper placeholder values

Author: tintinthong

Diff for: packages/boxel-ui/addon/src/components/input-group/accessories/index.gts

@@ -152,6 +152,7 @@ export const Select: TemplateOnlyComponent<SelectAccessorySignature> =
         @onChange={{@onChange}}
         @onBlur={{@onBlur}}
         @matchTriggerWidth={{@matchTriggerWidth}}
+        @selectedItemComponent={{@selectedItemComponent}}
         data-test-boxel-input-group-select-accessory-trigger
         ...attributes
         as |item|

Diff for: packages/boxel-ui/addon/src/components/phone-input/index.gts

@@ -12,6 +12,7 @@ import {
 // @ts-ignore
 import examples from 'libphonenumber-js/mobile/examples';
 import { countries, type TCountryCode, getEmojiFlag } from 'countries-list';
+import type { Select } from 'ember-power-select/components/power-select';
 
 interface Signature {
   Args: {};
@@ -55,9 +56,9 @@ const getCountryInfo = (countryCode: CountryCode): CountryInfo | undefined => {
 
 export class PhoneInput extends Component<Signature> {
   @tracked items: Array<CountryInfo> = [];
-  @tracked selectedItem: CountryInfo | null = null;
+  @tracked selectedItem: CountryInfo = getCountryInfo('US')!;
 
-  @action onSelectItem(item: CountryInfo | null): void {
+  @action onSelectItem(item: CountryInfo): void {
     this.selectedItem = item;
   }
 
@@ -72,20 +73,24 @@ export class PhoneInput extends Component<Signature> {
 
   get placeholder(): string | undefined {
     if (this.selectedItem) {
-      return `+${this.selectedItem.callingCode} ${this.selectedItem.example?.nationalNumber}`;
+      return this.selectedItem.example?.nationalNumber;
     }
-    return 'Select a country';
+    return undefined;
   }
 
   <template>
     <BoxelInputGroup @placeholder={{this.placeholder}}>
       <:before as |Accessories|>
         <Accessories.Select
-          @placeholder='Select a country'
+          @placeholder={{this.placeholder}}
           @selected={{this.selectedItem}}
           @onChange={{this.onSelectItem}}
           @options={{this.items}}
-          aria-label='Select an item'
+          @selectedItemComponent={{PhoneSelectedItem}}
+          @searchEnabled={{true}}
+          @searchField='name'
+          @matchTriggerWidth={{false}}
+          aria-label='Select an country calling code'
           as |item|
         >
           <div>{{item.flag}} {{item.name}} +{{item.callingCode}}</div>
@@ -94,3 +99,24 @@ export class PhoneInput extends Component<Signature> {
     </BoxelInputGroup>
   </template>
 }
+
+export interface SelectedItemSignature<ItemT> {
+  Args: {
+    option: any;
+    select: Select & {
+      actions: {
+        remove: (item: ItemT) => void;
+      };
+    };
+  };
+  Blocks: {
+    default: [ItemT, Select];
+  };
+  Element: HTMLDivElement;
+}
+
+class PhoneSelectedItem<ItemT> extends Component<SelectedItemSignature<ItemT>> {
+  <template>
+    <div>{{@option.flag}} +{{@option.callingCode}}</div>
+  </template>
+}