fix(Input): cannot expand when input spaces, close #1046

components/input/index.spec.ts

@@ -4,12 +4,13 @@ import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
 import AutoRowsDemo from '~/components/input/demos/autoRows';
 import PasswordDemo from '~/components/input/demos/password';
+import AutoWidthDemo from '~/components/input/demos/autowidth';
 import {Input} from './';
 import {Dialog} from '../dialog';
 import { Component } from 'intact';
 
 describe('Input', () => {
-    afterEach(() => {unmount()});
+    // afterEach(() => {unmount()});
 
     it('basic test', async () => {
         const [instance, element] = mount(BasicDemo); 
@@ -166,4 +167,14 @@ describe('Input', () => {
         const width = parseInt(dialog.querySelector<HTMLInputElement>('.k-input-inner')!.style.width);
         expect(width).to.gt(1);
     });
+
+    it('autoWidth', async() => {
+        // should expand when input spaces
+        const [instance, element] = mount(AutoWidthDemo);
+        const input = element.querySelector('input') as HTMLInputElement;
+        input.value = 'ab  ';
+        dispatchEvent(input, 'input');
+        await wait(50);
+        expect(input.offsetWidth).to.gt(16);
+    });
 });

components/input/index.vdt

@@ -143,7 +143,7 @@ if (hasInputValue) {
                         <b:suffix />
                     </div>
                     <div class={`${k}-input-fake`} v-if={autoWidth}>
-                        <span ref={fakeRef}>{!hasValue ? (hasInputValue || !defaultValue ? placeholder : defaultValue) : inputValue}</span>
+                        <pre ref={fakeRef}>{!hasValue ? (hasInputValue || !defaultValue ? placeholder : defaultValue) : inputValue}</pre>
                     </div>
                 </div>
             </Wave>

components/input/styles.ts

@@ -325,6 +325,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
             // width: 100%;
             visibility: hidden;
             white-space: nowrap;
+            pre {
+                font-family: inherit;
+            }
         }
         &.${k}-auto-width {
             width: auto;

components/select/index.spec.ts

@@ -12,10 +12,10 @@ import SearchableDemo from '~/components/select/demos/searchable';
 import ImmutableDemo from '~/components/select/demos/immutable';
 
 describe('Select', () => {
-    // afterEach((done) => {
-        // unmount();
-        // setTimeout(done, 500);
-    // });
+    afterEach((done) => {
+        unmount();
+        setTimeout(done, 500);
+    });
 
     it('should select value correctly', async () => {
         const [instance, element] = mount(BasicDemo);