fix: borderLeftRadius error for Input.Search #32808 (#32812)

close #32808
ant-design · Nov 13, 2021 · 491cc4f · 491cc4f
1 parent 958df3d
commit 491cc4f
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 5 deletions.
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -2767,6 +2767,87 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
       </span>
     </span>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-input-group-wrapper ant-input-search"
+      style="width:304px"
+    >
+      <span
+        class="ant-input-wrapper ant-input-group"
+      >
+        <span
+          class="ant-input-group-addon"
+        >
+          https://
+        </span>
+        <span
+          class="ant-input-affix-wrapper"
+        >
+          <input
+            class="ant-input"
+            placeholder="input search text"
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+              role="button"
+              tabindex="-1"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+        <span
+          class="ant-input-group-addon"
+        >
+          <button
+            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+  </div>
   <div
     class="ant-space-item"
     style="margin-bottom:8px"

diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
@@ -34,6 +34,13 @@ ReactDOM.render(
   <Space direction="vertical">
     <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
     <Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />
+    <Search
+      addonBefore="https://"
+      placeholder="input search text"
+      allowClear
+      onSearch={onSearch}
+      style={{ width: 304 }}
+    />
     <Search placeholder="input search text" onSearch={onSearch} enterButton />
     <Search
       placeholder="input search text"

diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
@@ -293,11 +293,6 @@
   }
 
   .@{inputClass}-affix-wrapper {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
     &:not(:last-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -306,6 +301,12 @@
         border-bottom-left-radius: @border-radius-base;
       }
     }
+
+    &:not(:first-child),
+    .@{ant-prefix}-input-search &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
   }
 
   &&-compact {