Repository: arco-design/arco-design (ts)

Issue:
Select 组件支持创建选项，导致被禁用的选项也能被选中。
- [ ] I'm sure this does not appear in [the issue list of the repository](https://github.com/arco-design/arco-design/issues)

## 基本信息 
- **依赖包名 及 版本:** @arco-design/web-react: 2.24.0
- **系统版本:** macOS 12.0.1
- **浏览器版本:** Chrome/94.0.4606.81
- **复现地址:** https://codepen.io/pen/?editors=0011

## 额外补充
演示<img src="https://p3.dcarimg.com/img/tos-cn-i-dcdx/173f69b42eab47338d30f33b33c5812a~noop.image" width="40%"/>

## 预期结果
输入一个禁用的选项值，不应该可以选中。

## 复现步骤
设置禁用的选项，开启创建选项的能力。
此时输入一个禁用的选项值，就可以选中，导致异常。


<!-- generated by arco-issue. DO NOT REMOVE -->

Pull request:
fix: Select allowCreate may change disabled options by user input
<!--
  Thanks so much for your PR and contribution.

  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design/blob/main/CONTRIBUTING.md
-->

<!-- Put an `x` in "[ ]" to check a box) -->

## Types of changes

<!-- What types of changes does this PR introduce -->
- [ ] New feature
- [x] Bug fix
- [ ] Documentation change
- [ ] Coding style change
- [ ] Component style change
- [ ] Refactoring
- [ ] Performance improvement
- [ ] Test cases
- [ ] Continuous integration
- [ ] Typescript definition change
- [ ] Breaking change
- [ ] Others 

## Background and context

<!-- Explain what problem does the PR solve -->
<!-- Link to related open issues if applicable -->

## Changelog

| Component | Changelog(CN) | Changelog(EN) | Related issues |
| --------- | ------------- | ------------- | -------------- |
| Select | `Select` 修复允许创建选项时，被禁用的选项可以被通过用户输入的方式被选中的 bug。  |  `Select` fixes the bug that disabled options can be selected by user input when `allowCreate = true`. |   Close #370    |

## Checklist:

- [ ] Test suite passes (`npm run test`)
- [x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
- [x] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others should be submitted to `main` branch)

## Other information

<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->


Patch:
diff --git a/components/Calendar/style/token.less b/components/Calendar/style/token.less
index c2a9e1ee..6e802cd6 100644
--- a/components/Calendar/style/token.less
+++ b/components/Calendar/style/token.less
@@ -18,7 +18,6 @@
 @calendar-color-cell-text-in-view: var(--color-text-1);
 @calendar-color-cell-text-not-in-view: var(--color-text-4);
 @calendar-color-bg-circle_selected: @color-primary-6;
-@calendar-color-bg-circle_selected: @color-primary-6;
 @calendar-color-bg-cell-in-range: var(--color-primary-light-1);
 @calendar-color-bg-cell-disabled: var(--color-fill-1);
 @calendar-color-text-cell-range-boundary: var(--color-white);
diff --git a/components/Divider/index.tsx b/components/Divider/index.tsx
index ab6a51e9..43563785 100644
--- a/components/Divider/index.tsx
+++ b/components/Divider/index.tsx
@@ -20,6 +20,7 @@ function Divider(baseProps: DividerProps, ref) {
     `${prefixCls}-${type}`,
     {
       [`${prefixCls}-with-text`]: children,
+      [`${prefixCls}-with-text-${orientation}`]: children && orientation,
     },
     className
   );
diff --git a/components/Divider/style/index.less b/components/Divider/style/index.less
index f044f720..11f563ab 100644
--- a/components/Divider/style/index.less
+++ b/components/Divider/style/index.less
@@ -14,6 +14,29 @@
 
     &.@{divider-prefix-cls}-with-text {
       margin: @divider-margin-vertical_text 0;
+      display: flex;
+      align-items: center;
+      border-bottom-width: 0;
+
+      &::before,
+      &::after {
+        content: '';
+        height: 0;
+        border-bottom-width: @divider-size;
+        border-bottom-style: @divider-line-style;
+        border-bottom-color: inherit;
+        flex: 1;
+      }
+    }
+
+    &.@{divider-prefix-cls}-with-text-left:before {
+      flex-basis: @divider-position-text-left;
+      flex-grow: 0;
+    }
+
+    &.@{divider-prefix-cls}-with-text-right:after {
+      flex-basis: @divider-position-text-right;
+      flex-grow: 0;
     }
   }
 
@@ -29,28 +52,12 @@
 
   // 仅水平分割线才支持文字，只考虑水平情况
   &-text {
-    position: absolute;
     box-sizing: border-box;
-    top: 50%;
     padding: 0 @divider-margin-text;
     font-size: @divider-font-size;
     font-weight: @divider-font-weight;
     line-height: 2;
-    background: var(--color-bg-2);
     color: @divider-color-text;
-    transform: translateY(-50%);
-
-    &-center {
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &-left {
-      left: @divider-position-text-left;
-    }
-
-    &-right {
-      right: @divider-position-text-right;
-    }
+    flex: 0;
   }
 }
diff --git a/components/Select/select.tsx b/components/Select/select.tsx
index 0fcb8a12..1f5401ce 100644
--- a/components/Select/select.tsx
+++ b/components/Select/select.tsx
@@ -122,7 +122,9 @@ function Select(baseProps: SelectProps, ref) {
         ? triggerProps.popupVisible
         : undefined,
   });
-  // tag模式下，由用户输入而扩展到Options中的值
+  // allowCreate 时，用户正在创建的选项值
+  const [userCreatingOption, setUserCreatingOption] = useState<string>(null);
+  // allowCreate 时，由用户输入而扩展到选项中的值
   const [userCreatedOptions, setUserCreatedOptions] = useState<string[]>([]);
   // 具有选中态或者 hover 态的 option 的 value
   const [valueActive, setValueActive] = useState<OptionProps['value']>(
@@ -144,10 +146,10 @@ function Select(baseProps: SelectProps, ref) {
         prefixCls,
         inputValue,
         userCreatedOptions,
-        userCreatingOption: allowCreate ? inputValue : '',
+        userCreatingOption,
       }
     );
-  }, [children, options, filterOption, inputValue, userCreatedOptions]);
+  }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]);
 
   // ref
   const refWrapper = useRef(null);
@@ -264,6 +266,14 @@ function Select(baseProps: SelectProps, ref) {
     }
   }, [value]);
 
+  // allowCreate 时，根据输入内容动态修改下拉框选项
+  useEffect(() => {
+    if (allowCreate) {
+      // 避免正在输入的内容覆盖已有的选项
+      setUserCreatingOption(optionInfoMap.has(inputValue) ? null : inputValue);
+    }
+  }, [inputValue]);
+
   // 在 inputValue 变化时，适时触发 onSearch
   useEffect(() => {
     const { current: reason } = refOnInputChangeCallbackReason;
diff --git a/components/Tag/style/token.less b/components/Tag/style/token.less
index 03b087ae..ee84b5ed 100644
--- a/components/Tag/style/token.less
+++ b/components/Tag/style/token.less
@@ -125,8 +125,8 @@
 @tag-pinkpurple-color-bg_hover: rgb(var(--pinkpurple-2));
 @tag-pinkpurple-color-border: @color-transparent;
 @tag-pinkpurple-bordered-color-border: rgb(var(--pinkpurple-6));
-@tag-pinkpurple-color-border_hover: rgb(var(--pinkpurple-2));
-@tag-pinkpurple-color-icon: @color-transparent;
+@tag-pinkpurple-color-border_hover: @color-transparent;
+@tag-pinkpurple-color-icon: rgb(var(--pinkpurple-6));
 @tag-pinkpurple-color-icon-bg_hover: rgb(var(--pinkpurple-2));
 @tag-pinkpurple-color-text: rgb(var(--pinkpurple-6));
 
diff --git a/components/style/animation/slide.less b/components/style/animation/slide.less
index 7226c75f..47eb491a 100644
--- a/components/style/animation/slide.less
+++ b/components/style/animation/slide.less
@@ -6,15 +6,16 @@
   opacity: 0;
   transform-origin: 0 0;
   transform: scaleY(0.9) translateZ(0);
-  transition: transform @transition-duration-2 @transition-timing-function-standard,
-    opacity @transition-duration-2 @transition-timing-function-standard;
 }
 
+
 .slideDynamicOrigin-enter-active,
 .slideDynamicOrigin-appear-active {
   opacity: 1;
   transform-origin: 0 0;
   transform: scaleY(1) translateZ(0);
+  transition: transform @transition-duration-2 @transition-timing-function-standard,
+    opacity @transition-duration-2 @transition-timing-function-standard;
 }
 
 .slideDynamicOrigin-exit {


Test patch:
diff --git a/components/Button/__test__/__snapshots__/demo.test.ts.snap b/components/Button/__test__/__snapshots__/demo.test.ts.snap
index 41bf5b4b..d1513c03 100644
--- a/components/Button/__test__/__snapshots__/demo.test.ts.snap
+++ b/components/Button/__test__/__snapshots__/demo.test.ts.snap
@@ -904,7 +904,7 @@ exports[`renders Button/demo/loading.md correctly 1`] = `
     </span>
   </button>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-center"
     style="width:440px;min-width:440px"
   >
     <span
diff --git a/components/Divider/__test__/__snapshots__/demo.test.ts.snap b/components/Divider/__test__/__snapshots__/demo.test.ts.snap
index 2f08b3b0..6b533401 100644
--- a/components/Divider/__test__/__snapshots__/demo.test.ts.snap
+++ b/components/Divider/__test__/__snapshots__/demo.test.ts.snap
@@ -187,7 +187,7 @@ exports[`renders Divider/demo/with-text.md correctly 1`] = `
     A design is a plan or specification for the construction of an object.
   </div>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-left"
   >
     <span
       class="arco-divider-text arco-divider-text-left"
@@ -201,7 +201,7 @@ exports[`renders Divider/demo/with-text.md correctly 1`] = `
     A design is a plan or specification for the construction of an object.
   </div>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-center"
   >
     <span
       class="arco-divider-text arco-divider-text-center"
@@ -215,7 +215,7 @@ exports[`renders Divider/demo/with-text.md correctly 1`] = `
     A design is a plan or specification for the construction of an object.
   </div>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-right"
   >
     <span
       class="arco-divider-text arco-divider-text-right"
diff --git a/components/Grid/__test__/__snapshots__/demo.test.ts.snap b/components/Grid/__test__/__snapshots__/demo.test.ts.snap
index 99470d90..e44677ca 100644
--- a/components/Grid/__test__/__snapshots__/demo.test.ts.snap
+++ b/components/Grid/__test__/__snapshots__/demo.test.ts.snap
@@ -645,7 +645,7 @@ exports[`renders Grid/demo/gutter.md correctly 1`] = `
   style="width:100%"
 >
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-left"
   >
     <span
       class="arco-divider-text arco-divider-text-left"
@@ -675,7 +675,7 @@ exports[`renders Grid/demo/gutter.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-left"
   >
     <span
       class="arco-divider-text arco-divider-text-left"
@@ -721,7 +721,7 @@ exports[`renders Grid/demo/gutter.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="arco-divider arco-divider-horizontal arco-divider-with-text"
+    class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-left"
   >
     <span
       class="arco-divider-text arco-divider-text-left"
diff --git a/components/ResizeBox/__test__/__snapshots__/demo.test.ts.snap b/components/ResizeBox/__test__/__snapshots__/demo.test.ts.snap
index 8d996d20..ef18845f 100644
--- a/components/ResizeBox/__test__/__snapshots__/demo.test.ts.snap
+++ b/components/ResizeBox/__test__/__snapshots__/demo.test.ts.snap
@@ -20,7 +20,7 @@ exports[`renders ResizeBox/demo/basic.md correctly 1`] = `
       ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.
     </div>
     <div
-      class="arco-divider arco-divider-horizontal arco-divider-with-text"
+      class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-center"
     >
       <span
         class="arco-divider-text arco-divider-text-center"
@@ -129,7 +129,7 @@ exports[`renders ResizeBox/demo/control.md correctly 1`] = `
       ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.
     </div>
     <div
-      class="arco-divider arco-divider-horizontal arco-divider-with-text"
+      class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-center"
     >
       <span
         class="arco-divider-text arco-divider-text-center"
@@ -238,7 +238,7 @@ exports[`renders ResizeBox/demo/custom-triggers.md correctly 1`] = `
       ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.
     </div>
     <div
-      class="arco-divider arco-divider-horizontal arco-divider-with-text"
+      class="arco-divider arco-divider-horizontal arco-divider-with-text arco-divider-with-text-center"
     >
       <span
         class="arco-divider-text arco-divider-text-center"
diff --git a/components/Select/__test__/index.test.tsx b/components/Select/__test__/index.test.tsx
index ec714f3a..eeeb52b5 100644
--- a/components/Select/__test__/index.test.tsx
+++ b/components/Select/__test__/index.test.tsx
@@ -325,4 +325,19 @@ describe('Select', () => {
 
     expect(wrapper.find('.arco-tag')).toHaveLength(2);
   });
+
+  it('User creating option will not affect original options', () => {
+    const value = 'Hello';
+    wrapper = mountSelect(
+      <Select
+        allowCreate
+        popupVisible
+        mode="multiple"
+        inputValue={value}
+        defaultValue={[value]}
+        options={[{ value, label: value, disabled: true }]}
+      />
+    );
+    expect(wrapper.find('.arco-select-option-disabled')).toHaveLength(1);
+  });
 });