fix: Form Input prefix style in error status

close #30629
ant-design · May 24, 2021 · 6c4ff4b · 6c4ff4b
1 parent 59c21dc
commit 6c4ff4b
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 14 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -3532,6 +3532,92 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+    >
+      <label
+        class="ant-form-item-required"
+        for="register_gender"
+        title="Gender"
+      >
+        Gender
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-select ant-select-single ant-select-show-arrow"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-activedescendant="register_gender_list_0"
+                  aria-autocomplete="list"
+                  aria-controls="register_gender_list"
+                  aria-haspopup="listbox"
+                  aria-owns="register_gender_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  id="register_gender"
+                  readonly=""
+                  role="combobox"
+                  style="opacity:0"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              >
+                select your gender
+              </span>
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >

diff --git a/components/form/demo/register.md b/components/form/demo/register.md
@@ -15,17 +15,7 @@ Fill in this form to create a new account for you.
 
 ```tsx
 import React, { useState } from 'react';
-import {
-  Form,
-  Input,
-  Cascader,
-  Select,
-  Row,
-  Col,
-  Checkbox,
-  Button,
-  AutoComplete,
-} from 'antd';
+import { Form, Input, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
 
 const { Option } = Select;
 
@@ -221,6 +211,18 @@ const RegistrationForm = () => {
         </AutoComplete>
       </Form.Item>
 
+      <Form.Item
+        name="gender"
+        label="Gender"
+        rules={[{ required: true, message: 'Please select gender!' }]}
+      >
+        <Select placeholder="select your gender">
+          <Option value="male">Male</Option>
+          <Option value="female">Female</Option>
+          <Option value="other">Other</Option>
+        </Select>
+      </Form.Item>
+
       <Form.Item label="Captcha" extra="We must make sure that your are a human.">
         <Row gutter={8}>
           <Col span={12}>

diff --git a/components/form/style/status.less b/components/form/style/status.less
@@ -182,7 +182,9 @@
     .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
       &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
         .@{ant-prefix}-select-selector {
+        background-color: inherit;
         border: 0;
+        box-shadow: none;
       }
     }
 
@@ -221,9 +223,18 @@
       }
     }
 
-    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
-      background-color: @form-error-input-bg;
-      .active(@error-color);
+    // cascader
+    .@{ant-prefix}-cascader-picker {
+      &:hover
+        .@{ant-prefix}-cascader-picker-label:hover
+        + .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
+        border-color: @error-color;
+      }
+
+      &:focus .@{ant-prefix}-cascader-input {
+        background-color: @form-error-input-bg;
+        .active(@error-color);
+      }
     }
 
     // transfer