fix(tag-picker): fix TagPicker clear button not work (#1480)

fix #1467
rsuite · Feb 2, 2021 · aadcb51 · aadcb51 · vercel · Feb 2, 2021
1 parent c7a1194
commit aadcb51
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/InputPicker/InputAutosize.tsx b/src/InputPicker/InputAutosize.tsx
@@ -36,6 +36,7 @@ export interface InputAutosizeProps {
 }
 
 interface InputAutosizeState {
+  inputId: string;
   inputWidth: number;
 }
 
@@ -54,12 +55,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     onAutosize: PropTypes.func
   };
   static defaultProps = {
-    minWidth: 1,
-    inputId:
-      '_' +
-      Math.random()
-        .toString(36)
-        .substr(2, 12)
+    minWidth: 1
   };
 
   inputRef: React.RefObject<any>;
@@ -69,6 +65,11 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
   constructor(props) {
     super(props);
     this.state = {
+      inputId:
+        '_' +
+        Math.random()
+          .toString(36)
+          .substr(2, 12),
       inputWidth: props.minWidth
     };
 
@@ -81,6 +82,10 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     return this.inputRef.current;
   }
 
+  getInputId = () => {
+    return this.props.inputId || this.state.inputId;
+  };
+
   componentDidMount() {
     this.copyInputStyles();
     this.updateInputWidth();
@@ -135,7 +140,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
   }
 
   renderStyles() {
-    const { inputId } = this.props;
+    const inputId = this.getInputId();
     return isIE() ? (
       <style
         dangerouslySetInnerHTML={{
@@ -153,10 +158,10 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
       className,
       placeholder,
       inputClassName,
-      inputStyle,
-      inputId
+      inputStyle
     } = this.props;
 
+    const inputId = this.getInputId();
     const sizerValue = [defaultValue, value, ''].reduce((previousValue, currentValue) => {
       if (previousValue !== null && previousValue !== undefined) {
         return previousValue;
@@ -178,7 +183,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     const [htmlInputProps] = partitionHTMLProps(this.props);
 
     htmlInputProps.className = inputClassName;
-    htmlInputProps.id = inputId;
+    htmlInputProps.id = inputId || inputId;
     htmlInputProps.style = nextInputStyle;
 
     return (

diff --git a/src/InputPicker/styles/common.less b/src/InputPicker/styles/common.less
@@ -43,10 +43,10 @@
 }
 
 .@{ns}picker-tag-wrapper {
-  padding-right: @dropdown-toggle-padding-right;
+  margin-right: @dropdown-toggle-padding-right;
 
   .@{ns}picker-cleanable & {
-    padding-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;
+    margin-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;
   }
 }