From 9e01577fea3edf381a8839fa09651ccac415c2f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 1 Mar 2024 16:12:39 +0800
Subject: [PATCH] fix(input-number): fix overlap between step button and
 suffix/append (#3005)

---
 .../components/input-number/input-number.tsx    |  4 +++-
 .../components/input-number/style/index.less    | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
index a6c5ae73d..e5c34bcda 100644
--- a/packages/web-vue/components/input-number/input-number.tsx
+++ b/packages/web-vue/components/input-number/input-number.tsx
@@ -466,7 +466,9 @@ export default defineComponent({
       }
       return (
         <>
-          {slots.suffix?.()}
+          {slots.suffix && (
+            <div class={`${prefixCls}-suffix`}>{slots.suffix?.()}</div>
+          )}
           <div class={`${prefixCls}-step`}>
             <button
               class={[
diff --git a/packages/web-vue/components/input-number/style/index.less b/packages/web-vue/components/input-number/style/index.less
index 8e4744671..6bcbe270d 100644
--- a/packages/web-vue/components/input-number/style/index.less
+++ b/packages/web-vue/components/input-number/style/index.less
@@ -49,6 +49,10 @@
     }
   }
 
+  .@{input-prefix-cls}-wrapper {
+    position: relative;
+  }
+
   &-prefix,
   &-suffix {
     .transition();
@@ -92,13 +96,18 @@
     &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
       &:hover,
       &:focus-within {
+        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
+        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
+          padding-left: @spacing-2;
+        }
+
         & .@{input-number-prefix-cls}-step {
           opacity: 1;
+        }
 
-          & ~ .@{input-prefix-cls}-suffix {
-            opacity: 0;
-            pointer-events: none;
-          }
+        & .@{input-number-prefix-cls}-suffix {
+          opacity: 0;
+          pointer-events: none;
         }
       }
     }