fix: input taro显示右侧按钮时focus失效问题修复；textare limitshow属性名字更正 (#557)

src/packages/input/input.scss

@@ -113,6 +113,21 @@ textarea {
     flex: 1;
     vertical-align: middle;
   }
+  &-right-mark {
+    .nut-input-value {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .nut-input-inner {
+      flex: 1;
+    }
+    .nut-input-button,
+    .nut-input-right-icon {
+      width: auto;
+    }
+  }
   &-inner {
     position: relative;
     display: flex;

src/packages/input/input.taro.tsx

@@ -234,6 +234,7 @@ export const Input: FunctionComponent<
       `${required ? `${prefixCls}-required` : ''}`,
       `${error ? `${prefixCls}-error` : ''}`,
       `${border ? `${prefixCls}-border` : ''}`,
+      `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ''}`,
     ]
       .filter(Boolean)
       .join(' ')
@@ -471,25 +472,25 @@ export const Input: FunctionComponent<
                   }}
                 />
               ) : null}
-              {rightIcon && rightIcon.length > 0 ? (
-                <div
-                  className="nut-input-right-icon"
-                  onClick={(e) => {
-                    handleClickRightIcon(e)
-                  }}
-                >
-                  <Icon
-                    classPrefix={iconClassPrefix}
-                    fontClassName={iconFontClassName}
-                    name={rightIcon}
-                    size={rightIconSize}
-                  />
-                </div>
-              ) : null}
-              {slotButton ? (
-                <div className="nut-input-button">{slotButton}</div>
-              ) : null}
             </div>
+            {rightIcon && rightIcon.length > 0 ? (
+              <div
+                className="nut-input-right-icon"
+                onClick={(e) => {
+                  handleClickRightIcon(e)
+                }}
+              >
+                <Icon
+                  classPrefix={iconClassPrefix}
+                  fontClassName={iconFontClassName}
+                  name={rightIcon}
+                  size={rightIconSize}
+                />
+              </div>
+            ) : null}
+            {slotButton ? (
+              <div className="nut-input-button">{slotButton}</div>
+            ) : null}
             {showWordLimit && maxlength ? (
               <div className="nut-input-word-limit">
                 <span className="nut-input-word-num">

src/packages/input/input.tsx

@@ -234,6 +234,7 @@ export const Input: FunctionComponent<
       `${required ? `${prefixCls}-required` : ''}`,
       `${error ? `${prefixCls}-error` : ''}`,
       `${border ? `${prefixCls}-border` : ''}`,
+      `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ''}`,
     ]
       .filter(Boolean)
       .join(' ')
@@ -471,25 +472,27 @@ export const Input: FunctionComponent<
                   }}
                 />
               ) : null}
-              {rightIcon && rightIcon.length > 0 ? (
-                <div
-                  className="nut-input-right-icon"
-                  onClick={(e) => {
-                    handleClickRightIcon(e)
-                  }}
-                >
-                  <Icon
-                    classPrefix={iconClassPrefix}
-                    fontClassName={iconFontClassName}
-                    name={rightIcon}
-                    size={rightIconSize}
-                  />
-                </div>
-              ) : null}
-              {slotButton ? (
-                <div className="nut-input-button">{slotButton}</div>
-              ) : null}
             </div>
+
+            {rightIcon && rightIcon.length > 0 ? (
+              <div
+                className="nut-input-right-icon"
+                onClick={(e) => {
+                  handleClickRightIcon(e)
+                }}
+              >
+                <Icon
+                  classPrefix={iconClassPrefix}
+                  fontClassName={iconFontClassName}
+                  name={rightIcon}
+                  size={rightIconSize}
+                />
+              </div>
+            ) : null}
+            {slotButton ? (
+              <div className="nut-input-button">{slotButton}</div>
+            ) : null}
+
             {showWordLimit && maxlength ? (
               <div className="nut-input-word-limit">
                 <span className="nut-input-word-num">

src/packages/textarea/doc.en-US.md

@@ -64,7 +64,7 @@ const App = () => {
     const [value2, updateValue2] = useState('')
     return (
         <>
-            <TextArea defaultValue={value2} limitShow maxlength="20" />
+            <TextArea defaultValue={value2} limitshow maxlength="20" />
         </>
     )
 };
@@ -104,7 +104,7 @@ const App = () => {
     return (
         <>
             <TextArea readonly defaultValue="textarea readonly" />
-            <TextArea disabled defaultValue="textarea disabled" limitShow maxlength="20" />
+            <TextArea disabled defaultValue="textarea disabled" limitshow maxlength="20" />
         </>
     )
 };
@@ -141,7 +141,7 @@ export default App
 | placeholder  | set placeholder prompt text             | String         | ` 'please enter content' ` |
 | maxlength    | limit the maximum input characters              | String、Number | -              |
 | rows         | height of textarea, with priority higher than autosize attribute `Only H5 is supported`                                  | String、Number | `2`            |
-| limitShow    | whether textarea displays the input characters. Use | Boolean        | `false`        |
+| limitshow    | whether textarea displays the input characters. Use | Boolean        | `false`        |
 | autosize     | whether to adapt the content height. You can also pass in objects, such as {maxheight: 200, minheight: 100}. The unit is PX          | Boolean        | `false`    |
 | textAlign    | text position, optional values ` left ,  center,  right `     | String         | `left`         |
 | readonly     | read only attribute          | Boolean        | `false`        |

src/packages/textarea/doc.md

@@ -63,7 +63,7 @@ const App = () => {
     const [value2, updateValue2] = useState('')
     return (
         <>
-            <TextArea defaultValue={value2} limitShow maxlength="20" />
+            <TextArea defaultValue={value2} limitshow maxlength="20" />
         </>
     )
 };
@@ -103,7 +103,7 @@ const App = () => {
     return (
         <>
             <TextArea readonly defaultValue="textarea只读状态" />
-            <TextArea disabled defaultValue="textarea禁用状态" limitShow maxlength="20" />
+            <TextArea disabled defaultValue="textarea禁用状态" limitshow maxlength="20" />
         </>
     )
 };
@@ -140,7 +140,7 @@ export default App
 | placeholder  | 设置占位提示文字                                  | String         | `'请输入内容'` |
 | maxlength    | 限制最长输入字符                                  | String、Number | -              |
 | rows         | textarea 的高度                                   | String、Number | `2`            |
-| limitShow    | textarea 是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
+| limitshow    | textarea 是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
 | autosize     | 高度是否可拉伸                                    | Boolean        | `false`        |
 | textAlign    | 文本位置,可选值`left`,`center`,`right`            | String         | `left`         |
 | readonly     | 只读属性                                          | Boolean        | `false`        |

src/packages/textarea/doc.zh-TW.md

@@ -63,7 +63,7 @@ const App = () => {
     const [value2, updateValue2] = useState('')
     return (
         <>
-            <TextArea defaultValue={value2} limitShow maxlength="20" />
+            <TextArea defaultValue={value2} limitshow maxlength="20" />
         </>
     )
 };
@@ -103,7 +103,7 @@ const App = () => {
     return (
         <>
             <TextArea readonly defaultValue="textarea只读状态" />
-            <TextArea disabled defaultValue="textarea禁用状态" limitShow maxlength="20" />
+            <TextArea disabled defaultValue="textarea禁用状态" limitshow maxlength="20" />
         </>
     )
 };
@@ -139,7 +139,7 @@ export default App
 | placeholder  | 设置占位提示文字                                  | String         | `'请输入内容'` |
 | maxlength    | 限制最长输入字符                                  | String、Number | -              |
 | rows         | textarea 的高度                                   | String、Number | `2`            |
-| limitShow    | textarea 是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
+| limitshow    | textarea 是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
 | autosize     | 高度是否可拉伸                                    | Boolean        | `false`        |
 | textAlign    | 文本位置,可选值`left`,`center`,`right`            | String         | `left`         |
 | readonly     | 只读属性                                          | Boolean        | `false`        |