表单项的宽度改成 minWidth 设置

scss/_variables.scss

@@ -616,6 +616,7 @@ $Form--horizontal-label-widthLg: px2rem(200px) !default;
 
 $Form-control-widthXs: px2rem(80px) !default;
 $Form-control-widthSm: px2rem(160px) !default;
+$Form-control-widthBase: px2rem(200px) !default;
 $Form-control-widthMd: px2rem(240px) !default;
 $Form-control-widthLg: px2rem(320px) !default;
 

scss/components/form/_form.scss

@@ -112,28 +112,28 @@
   .#{$ns}Form-control--sizeXs {
     // min-width: $Form-control-widthXs;
     // width: auto;
-    width: $Form-control-widthXs;
+    min-width: $Form-control-widthXs;
     max-width: 100%;
     display: inline-block;
     vertical-align: top;
   }
 
   .#{$ns}Form-control--sizeSm {
-    width: $Form-control-widthSm;
+    min-width: $Form-control-widthSm;
     max-width: 100%;
     display: inline-block;
     vertical-align: top;
   }
 
   .#{$ns}Form-control--sizeMd {
-    width: $Form-control-widthMd;
+    min-width: $Form-control-widthMd;
     max-width: 100%;
     display: inline-block;
     vertical-align: top;
   }
 
   .#{$ns}Form-control--sizeLg {
-    width: $Form-control-widthLg;
+    min-width: $Form-control-widthLg;
     max-width: 100%;
     display: inline-block;
     vertical-align: top;

scss/components/form/_text.scss

@@ -19,6 +19,7 @@
 
 @mixin input-text {
   position: relative;
+  min-width: $Form-control-widthBase;
 
   &.is-inline {
     display: inline-block;

src/components/ColorPicker.tsx

@@ -234,10 +234,10 @@ export class ColorControl extends React.PureComponent<
         )}
       >
         <input
-          size={10}
           ref={this.input}
           type="text"
           autoComplete="off"
+          size={1}
           className={cx('ColorPicker-input')}
           value={this.state.inputValue || ''}
           placeholder={placeholder}

src/renderers/DropDownButton.tsx

@@ -27,7 +27,7 @@ export default class DropDownButton extends React.Component<
   DropDownButtonState
 > {
   state: DropDownButtonState = {
-    isOpened: this.props.defaultIsOpened || false
+    isOpened: false
   };
 
   static defaultProps = {
@@ -44,6 +44,14 @@ export default class DropDownButton extends React.Component<
     this.domRef = this.domRef.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.defaultIsOpened) {
+      this.setState({
+        isOpened: true
+      })
+    }
+  }
+
   domRef(ref: any) {
     this.target = ref;
   }

src/renderers/Form/IconPicker.tsx

@@ -259,6 +259,7 @@ export default class IconPickerControl extends React.PureComponent<
                     value: this.state.inputValue
                   })}
                   autoComplete="off"
+                  size={1}
                 />
               </div>
               {isOpen ? (

src/renderers/Form/Text.tsx

@@ -508,6 +508,7 @@ export default class TextControl extends React.PureComponent<
                     onKeyDown: this.handleKeyDown
                   })}
                   autoComplete="off"
+                  size={1}
                 />
               </div>
 
@@ -591,6 +592,7 @@ export default class TextControl extends React.PureComponent<
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           autoComplete="off"
+          size={1}
           onChange={this.handleNormalInputChange}
           value={
             typeof value === 'undefined' || value === null

src/renderers/Form/TransferSelect.tsx

@@ -189,6 +189,7 @@ export class TransferSelect extends React.Component<
                 <input
                   placeholder={searchPlaceholder}
                   autoComplete="off"
+                  size={1}
                   value={this.state.keyword}
                   onChange={this.handleSearch}
                 />
@@ -290,6 +291,7 @@ export class TransferSelect extends React.Component<
                 <input
                   placeholder={searchPlaceholder}
                   autoComplete="off"
+                  size={1}
                   onChange={this.handleSearch}
                 />
                 <i className="fa fa-search" />