fix(select.tsx, select.scss): fixed UI bugs for next line input

Fixed width for input element for multi-select
freshworks · May 27, 2020 · 151671d · 151671d
1 parent f09e54c
commit 151671d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/datepicker/datepicker.e2e.ts b/src/components/datepicker/datepicker.e2e.ts
@@ -71,10 +71,10 @@ describe('fw-datepicker', () => {
     const updateEle = await page.find('fw-datepicker >>> fw-button.update-date-value');
     await updateEle.click();
 
-    const datePicketValue = await element.getProperty('value');
+    const datePickerValue = await element.getProperty('value');
     const todayValue = moment().format('YYYY-MM-DD');
 
-    expect(datePicketValue.toString()).toBe(todayValue.toString());
+    expect(datePickerValue.toString()).toBe(todayValue.toString());
   });
 
   it('daterange picker calenders always should be sequential months ', async () => {

diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -55,20 +55,23 @@ label {
 
 // Input Container Style
 .input-container-inner {
-  display: block;
+  display: flex;
   width: 100%;
+  flex-wrap: wrap;
   position: relative;
 
   input {
+    flex-grow: 1;
     border: none;
     margin-top: 3px;
     font-size: var(--font-size-12);
     font-weight: var(--font-weight-500);
     letter-spacing: 0;
     line-height: 1.4;
     background-color: var(--input-bg);
-    width: 100%;
+    min-width: 20px;
     box-sizing: border-box;
+    overflow: hidden;
 
     &:focus {
       border: none;

diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
@@ -128,6 +128,8 @@ export class Select {
       }
       return option;
     });
+    this.selectInput.value = '';
+    this.renderInput();
     this.closeDropdown();
     selectedItem.stopPropagation();
   }
@@ -179,7 +181,7 @@ export class Select {
     if (selectedOptions.length > 0) {
       this.value = this.multiple ? selectedOptions.map(option => option.value) : selectedOptions[0].value || '';
       if (this.selectInput) {
-        this.selectInput.value = this.multiple ? '' : selectedOptions[0].text || '';
+        this.selectInput.value = this.multiple ? this.selectInput.value : selectedOptions[0].text || '';
       }
     } else if (selectedOptions.length === 0) {
       this.value = undefined;