fix

assets/toolkit/toolkit.css

@@ -73,7 +73,7 @@ input[type="color"] ~ .kit-field__color {
     padding: 1.5em 0 0 0;
     margin: 0 0 var(--kit-field-gap, 1.5em) 0;
 }
-.kit-field .kit-field__hr {
+.kit-field__hr {
     display: block;
     position: absolute;
     bottom: 0;
@@ -82,7 +82,7 @@ input[type="color"] ~ .kit-field__color {
     border-top: 1px solid var(--kit-color-text);
     z-index: 0;
 }
-.kit-field .kit-field__hr:after {
+.kit-field__hr:after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -164,6 +164,7 @@ input[type="color"] ~ .kit-field__color {
     font-family: var(--kit-font-family);
     list-style-type: none;
 }
+
 .kit-field textarea[data-dirty='true'],
 .kit-field input[data-dirty='true'],
 .kit-field [data-dirty='true'] ~ .kit-field__display{
@@ -218,6 +219,7 @@ input[type="color"] ~ .kit-field__color {
 .kit-field textarea.focus,
 .kit-field input.focus {
     color: var(--kit-color-text);
+    border-color: transparent;
 }
 .kit-field textarea:focus ~.kit-field__label,
 .kit-field input:focus ~.kit-field__label,
@@ -985,6 +987,7 @@ select.kit-field__input:disabled ~.kit-field__hr {
     -moz-transition: opacity 0.15s;
     transition: opacity 0.15s;
     min-width: 200px;
+    padding: 4px 4px 2px 4px;
 }
 .kit-dropdown.kit-active {
     opacity: 1;
@@ -996,6 +999,8 @@ select.kit-field__input:disabled ~.kit-field__hr {
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
+    border-radius: 2px;
+    margin-bottom: 2px;
 }
 .kit-dropdown__option:hover {
     background: #e5e5e5;
@@ -1110,11 +1115,18 @@ select.kit-field__input:disabled ~.kit-field__hr {
 }
 
 .kit-field--success ~.kit-field__label,
-.kit-field--success ~.kit-field__error {
+.kit-field--success ~.kit-field__error,
+.kit-field--success ~.kit-field__message {
     opacity: 1;
     visibility: visible;
     color: var(--kit-color-success) !important;
 }
+.kit-field--error ~.kit-field__error,
+.kit-field--error ~.kit-field__message {
+    opacity: 1;
+    visibility: visible;
+    color: var(--kit-color-error) !important;
+}
 .kit-field--success ~.kit-field__hr {
     border-color: var(--kit-color-success) !important;
 }

assets/toolkit/toolkit.js

@@ -341,7 +341,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global)
 
         // изменение инпута
         function changeHandler(e) {
-            var select = e.target;
+            var select = e.target || e;
             changeSelect(select);
         }
 
@@ -561,7 +561,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global)
         }
 
         function escapeKeyHandler(e) {
-            if (e.keyCode == 27) {
+            if (e.keyCode === 27) {
                 closeAll(null);
             }
         }
@@ -752,8 +752,9 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global)
         Inputs.prototype.changeFiled = function changeFiled(e) {
             var _this2 = this;
             var target = e.target || e;
+            var isInput = target.tagName === 'INPUT', isTextarea = target.tagName === 'TEXTAREA';
             if (target.classList.contains('kit-field__input')) {
-                if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                if (isInput || isTextarea) {
                     this.setDirty(target);
 
                     var value_min = $(target).attr('value_min');
@@ -791,15 +792,21 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global)
             });
         };
 
-        Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) {
+        Inputs.prototype.calcAutoHeight = function calcAutoHeight(node) {
-            target.style.height = target.style.minHeight = 'auto';
+            node.style.height = node.style.minHeight = 'auto';
-            var h;
+            node.rows = 1;
-            if (target.scrollHeight < 30) {
+            var h, styles = getComputedStyle(node);
-                h = '30' + 'px';
+
+            var minH = support.toNumber(styles.getPropertyValue('padding-top').trim().replace('px', ''))
+                + support.toNumber(styles.getPropertyValue('padding-bottom').trim().replace('px', ''))
+                + support.toNumber(styles.getPropertyValue('line-height').trim().replace('px', ''));
+
+            if (node.scrollHeight < minH) {
+                h = '' + minH + 'px';
             } else {
-                h = target.scrollHeight + 'px';
+                h = node.scrollHeight + 'px';
             }
-            target.style.height = target.style.minHeight = h;
+            node.style.height = node.style.minHeight = h;
         };
 
 

tests/cheatsheetTest.php

@@ -435,13 +435,32 @@ $APPLICATION->ShowHead();
         <div class="flex-list-item"><?
             service()->templater()->render('kit:textarea', [
                 'CLASS' => 'kit-field--check-mark-stroke',
-                //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
                 'NAME' => 'textarea',
                 'VALUE' => '',
                 'MAXLENGTH' => 1000,
                 'LABEL' => 'textarea label',
             ]); ?>
         </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:textarea', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'textarea',
+                'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'MAXLENGTH' => 1000,
+                'LABEL' => 'textarea label',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'tel',
+                'HINT' => 'phone',
+                'NAME' => 'phone',
+                'VALUE' => '+7800',
+                'LABEL' => 'phone',
+            ]); ?>
+        </div>
         <div class="flex-list-item"><?
             $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'FIELD_INPUT_FILE');
             $inputFile->multiple = true;