fix: eui-combo-box

Author: betocantu93

packages/core/src/components/eui-combo-box.gts

@@ -4,6 +4,7 @@ import { isArray } from '@ember/array';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { isEqual } from '@ember/utils';
+import 'ember-basic-dropdown/styles';
 
 import optional from 'ember-composable-helpers/helpers/optional';
 import pipe from 'ember-composable-helpers/helpers/pipe';

packages/core/src/components/eui-combo-box/options.gts

@@ -1,9 +1,7 @@
-import { isArray as isEmberArray } from '@ember/array';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
 import { inject as service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
-import { isEqual } from '@ember/utils';
 import { EnsureSafeComponentHelper } from '@embroider/util';
 
 //@ts-expect-error
@@ -21,27 +19,7 @@ import EuiLoadingSpinner from '../eui-loading-spinner.gts';
 import EuiText from '../eui-text.gts';
 
 import type EuiConfigService from '../../services/eui-config';
-
-
-//This was extracted from ember-power-select v7.2.0, becuase it was removed in v8.0.0... or renamed to ember-power-select-
-function emberPowerSelectIsSelected([option, selected]: [any, any[]]/* , hash*/): boolean {
-  if (selected === undefined || selected === null) {
-    return false;
-  }
-
-  if (isEmberArray(selected)) {
-    for (let i = 0; i < selected.length; i++) {
-      if (isEqual(selected[i], option)) {
-        return true;
-      }
-    }
-
-    return false;
-  } else {
-    return isEqual(option, selected);
-  }
-}
-
+import emberPowerSelectIsEqual from 'ember-power-select/helpers/ember-power-select-is-equal';
 
 export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   @service declare euiConfig: EuiConfigService;
@@ -143,10 +121,7 @@ export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions
                   (eq opt @select.highlighted)
                   ' euiFilterSelectItem-isFocused'
                 }}"
-              aria-selected="{{emberPowerSelectIsSelected
-                opt
-                @select.selected
-              }}"
+              aria-selected="{{emberPowerSelectIsEqual opt @select.selected}}"
               aria-disabled={{if opt.disabled "true"}}
               aria-current="{{eq opt @select.highlighted}}"
               data-option-index="{{index}}"

packages/core/src/components/eui-combo-box/trigger.gts

@@ -99,7 +99,6 @@ export default class EuiComboBoxTriggerComponent extends EmberPowerSelectMultipl
                 {{this.maybePlaceholder}}
               </p>
             {{/if}}
-
             {{#let
               (component
                 EuiComboBoxTriggerInput
@@ -127,7 +126,7 @@ export default class EuiComboBoxTriggerComponent extends EmberPowerSelectMultipl
                   (EnsureSafeComponentHelper @placeholderComponent)
                   select=@select
                   placeholder=@placeholder
-                  isMutlipleWithSearch=true
+                  isMultipleWithSearch=true
                   inputComponent=InputComponent
                   displayPlaceholder=(and
                     (not @select.searchText) (not @select.selected)

packages/core/src/components/eui-combo-box/trigger/input.gts

@@ -1,6 +1,5 @@
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import { scheduleOnce } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { isBlank } from '@ember/utils';
@@ -103,16 +102,13 @@ export default class EuiComboBoxTriggerInputComponent extends EmberPowerSelectPo
         id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
         value={{@select.searchText}}
         aria-controls={{@listboxId}}
-        style={{this.triggerMultipleInputStyle}}
         disabled={{@select.disabled}}
         tabindex={{@tabindex}}
         form="power-select-fake-form"
         {{on "focus" @onFocus}}
         {{on "blur" @onBlur}}
         {{on "input" this.handleInput}}
         {{on "keydown" this.handleKeydown}}
-        {{!@glint-expect-error}}
-        {{didInsert this.storeInputStyles}}
       />
     </div>
   </template>