Fix input width in PowerSelectMultiple

cibernox · Jan 17, 2024 · e778793 · e778793
1 parent 1f142a1
commit e778793
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 38 deletions.
diff --git a/ember-power-select/less/base.less b/ember-power-select/less/base.less
@@ -77,6 +77,15 @@
   flex-wrap: wrap;
   align-items: center;
   list-style: none;
+
+  & li.ember-power-select-trigger-multiple-input-container {
+    flex-grow: 1;
+    display: flex;
+
+    & input {
+      flex-grow: 1;
+    }
+  }
 }
 
 .ember-power-select-trigger-multiple-input {

diff --git a/ember-power-select/scss/base.scss b/ember-power-select/scss/base.scss
@@ -80,6 +80,15 @@
   flex-wrap: wrap;
   align-items: center;
   list-style: none;
+
+  & li.ember-power-select-trigger-multiple-input-container {
+    flex-grow: 1;
+    display: flex;
+
+    & input {
+      flex-grow: 1;
+    }
+  }
 }
 
 .ember-power-select-trigger-multiple-input {

diff --git a/ember-power-select/src/components/power-select-multiple/input.hbs b/ember-power-select/src/components/power-select-multiple/input.hbs
@@ -14,7 +14,6 @@
   aria-label={{@ariaLabel}}
   value={{@select.searchText}}
   aria-controls={{if @select.isOpen @listboxId}}
-  style={{this.triggerMultipleInputStyle}}
   placeholder={{this.maybePlaceholder}}
   disabled={{@select.disabled}}
   tabindex={{@tabindex}}
@@ -23,6 +22,5 @@
   {{on "blur" @onBlur}}
   {{on "input" this.handleInput}}
   {{on "keydown" this.handleKeydown}}
-  {{did-insert this.storeInputStyles}}
   ...attributes
 />
diff --git a/ember-power-select/src/components/power-select-multiple/input.ts b/ember-power-select/src/components/power-select-multiple/input.ts
@@ -1,10 +1,8 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { get } from '@ember/object';
-import { scheduleOnce } from '@ember/runloop';
 import { assert } from '@ember/debug';
 import { isBlank } from '@ember/utils';
-import { htmlSafe } from '@ember/template';
 import type { Select } from '../power-select';
 
 interface PowerSelectMultipleInputSignature {
@@ -32,25 +30,6 @@ const ua = window && window.navigator ? window.navigator.userAgent : '';
 const isIE = ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
 
 export default class PowerSelectMultipleInputComponent extends Component<PowerSelectMultipleInputSignature> {
-  private inputFont?: string;
-
-  // Properties
-  get triggerMultipleInputStyle() {
-    scheduleOnce('actions', null, this.args.select.actions.reposition);
-    if (!this.args.select.selected || this.args.select.selected.length === 0) {
-      return htmlSafe('width: 100%;');
-    } else {
-      let textWidth = 0;
-      if (this.inputFont) {
-        textWidth = this.measureWidth(
-          this.args.select.searchText,
-          this.inputFont,
-        );
-      }
-      return htmlSafe(`width: ${textWidth + 25}px`);
-    }
-  }
-
   get maybePlaceholder() {
     if (isIE || !this.args.isDefaultPlaceholder) {
       return undefined;
@@ -60,20 +39,6 @@ export default class PowerSelectMultipleInputComponent extends Component<PowerSe
       : '';
   }
 
-  // Actions
-  @action
-  storeInputStyles(input: Element) {
-    const {
-      fontStyle,
-      fontVariant,
-      fontWeight,
-      fontSize,
-      lineHeight,
-      fontFamily,
-    } = window.getComputedStyle(input);
-    this.inputFont = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
-  }
-
   @action
   handleInput(event: Event): void {
     const e = event as InputEvent;

diff --git a/ember-power-select/src/components/power-select-multiple/trigger.hbs b/ember-power-select/src/components/power-select-multiple/trigger.hbs
@@ -53,7 +53,7 @@
     {{/if}}
   {{/each}}
   {{#if @searchEnabled}}
-    <li>
+    <li class="ember-power-select-trigger-multiple-input-container">
       {{#let
         (component
           "power-select-multiple/input"