GP: clicking around inputs, IP switch styles

src/assets/less/components/tags-input.less

@@ -48,7 +48,7 @@
 
 	&.no-values .c-tags-input_tags-block {
 		@media (min-width: @screen-sm-min) {
-			padding: 0;
+			padding: 0 4px 0 0;
 		}
 	}
 
@@ -60,7 +60,7 @@
 		overflow-x: hidden;
 		width: 100%;
 		min-height: 40px;
-		padding: 4px;
+		padding: 5px;
 		border-radius: 8px;
 		background: #fff;
 		border: 1.5px solid #e7e7ee;
@@ -234,14 +234,27 @@
 
 	.switch-ip-type-wrapper {
 		align-items: center;
-		margin-left: 4px;
-		width: 92px;
+		width: 100%;
+		margin: 4px 0 0;
+
+		@media (min-width: @screen-sm-min) {
+			margin: 0 1px 0 4px;
+			width: 92px;
+		}
 
 		&:focus {
+			box-sizing: content-box;
 			box-shadow: 0 2px 2px rgba(0, 0, 0, .04), 0 0 0 1px #fff, 0 0 0 4px rgba(23, 212, 167, .48);
 			border: 1.5px solid #e7e7ee;
 			border-radius: 8px;
 			outline: none;
+			width: 100%;
+			margin: 3px 0 -1px -1px;
+
+			@media (min-width: @screen-sm-min) {
+				margin: 0 0 0 3px;
+				width: 92px;
+			}
 		}
 
 		.switch-input {
@@ -251,8 +264,7 @@
 				position: relative;
 				display: flex;
 				align-items: center;
-				padding: 0 2px;
-				width: 92px;
+				width: 100%;
 				height: 28px;
 				cursor: pointer;
 				font-weight: 400;
@@ -263,6 +275,10 @@
 				border-radius: 10px;
 				margin-bottom: 0;
 
+				@media (min-width: @screen-sm-min) {
+					width: 92px;
+				}
+
 				&.disabled {
 					cursor: default;
 				}
@@ -277,7 +293,7 @@
 					top: 2px;
 					background: transparent;
 					z-index: 2;
-					width: 44px;
+					width: 50%;
 					color: #17233a;
 					font-size: 12px;
 					font-weight: 400;
@@ -298,18 +314,25 @@
 				}
 
 				&:before {
+					position: relative;
+					transition-property: left;
+					transition-duration: 500ms;
 					display: flex;
-					width: 44px;
+					left: 2px;
+					width: calc(50% - 2px);
 					height: 24px;
 					content: "";
 					background: #fff;
 					border-radius: 8px;
+					border: 1px solid #e7e7ee;
 					z-index: 1;
 				}
 			}
 
 			&.checked + label {
-				padding-left: 46px;
+				&:before {
+					left: 50%;
+				}
 			}
 		}
 

src/views/components/controlled-input.html

@@ -1,4 +1,4 @@
-<label class="c-controlled-input {{classList}}">
+<div class="c-controlled-input {{classList}}">
 	<div class="c-controlled-input_info">
 		<span class="c-controlled-input_info_label">
 			{{labelText}}
@@ -26,7 +26,7 @@
 		placeholder="{{placeholder}}"
 		class="{{#if error}}has-error{{/if}}{{#if disabled}}is-disabled{{/if}}"
 		disabled="{{disabled}}">
-</label>
+</div>
 
 <script>
 	const debounce = require('../../assets/js/utils/debounce');

src/views/components/tags-input.html

@@ -1,4 +1,4 @@
-<label class="c-tags-input {{classList}} {{#if inputIcon}}with-input-icon{{/if}} {{#unless value}}no-values{{/unless}} {{#if error}}error{{/if}} {{#if isDisabled}}disabled{{/if}}">
+<div class="c-tags-input {{classList}} {{#if inputIcon}}with-input-icon{{/if}} {{#unless value}}no-values{{/unless}} {{#if error}}error{{/if}} {{#if isDisabled}}disabled{{/if}}">
 	<div class="c-tags-input_info">
 		<span class="c-tags-input_info_label">
 			{{labelText}}
@@ -69,7 +69,7 @@
 			</div>
 		{{/if}}
 	</div>
-</label>
+</div>
 
 <script>
 	const ipRegex = require('../../assets/js/utils/ip-regex');
@@ -273,7 +273,7 @@
 				});
 
 				document.addEventListener('click', (e) => {
-					if (!tagsBlockEl.contains(e.target)) {
+					if (e.target.isConnected && !tagsBlockEl.contains(e.target)) {
 						tagsBlockEl.classList.remove('focused');
 					}
 				});
@@ -362,6 +362,12 @@
 			tagsArr.splice(tagIdx, 1);
 
 			this.set('value', tagsArr.join(valuesDelimiter));
+
+			// set back focus to the input
+			let inputId = this.get('inputId');
+			let inputEl = this.find(`#${inputId}`);
+
+			inputEl.focus();
 		},
 		handleInputFocus (tagsBlockEl) {
 			let isDisabled = this.get('isDisabled');