From 9aa3248f1643c198dceb060a016bd6e397cc79c4 Mon Sep 17 00:00:00 2001
From: Javey <jiawei23716@sina.com>
Date: Wed, 20 Nov 2024 20:09:48 +0800
Subject: [PATCH] fix(Input): cannot expand when input spaces, close #1046

---
 components/input/index.spec.ts  | 13 ++++++++++++-
 components/input/index.vdt      |  2 +-
 components/input/styles.ts      |  3 +++
 components/select/index.spec.ts |  8 ++++----
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/input/index.spec.ts b/components/input/index.spec.ts
index ef99b28d8..beb0ad48a 100644
--- a/components/input/index.spec.ts
+++ b/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);
+    });
 });
diff --git a/components/input/index.vdt b/components/input/index.vdt
index 5058f79a4..4928b68b2 100644
--- a/components/input/index.vdt
+++ b/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>
diff --git a/components/input/styles.ts b/components/input/styles.ts
index fa94b04e0..233665d71 100644
--- a/components/input/styles.ts
+++ b/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;
diff --git a/components/select/index.spec.ts b/components/select/index.spec.ts
index feb7a7918..97d0cfa8e 100644
--- a/components/select/index.spec.ts
+++ b/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);