JSFiddle - React, Tailwind, and code Playground

by Vicos

HTML

<form class="offer-send-form row" action="">
	<textarea class="form-control new-offer" name="" rows="1" placeholder="Добавить предложение..."></textarea>
	<button class="send-form2" type="submit">Отправить</button>
</form>

CSS

.offer-send-form {
	padding: 7px 7px 7px 5px;
	margin: 5px 0 0 0;
	background-color: #f1f1f1;
}
.offer-send-form > div {
	margin: 0;
	position: relative;
}
.offer-send-form textarea {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 2px 5px 2px 15px;
	border: 1px solid #c0cad5;
	height: 27px;
}

JavaScript

// Открытие блока с предложением
	$('.offer-send-form').on('click', '.new-offer', function(event) {
		console.log(1);
	});

// Сокрытие блока с предложением
	 $('.offer-send-form').on('focusout', function(event) {
	 	var form = $(this);
	 	var area = $(this).find('.new-offer');
	 	var focusArea = area.filter(':focus');		
	 	var textArea = area.val();
	 	$(area).on('blur', function(event) {
	 		console.log(0);
	 	});
	 	if (!focusArea.is(':focus') && textArea == '') {
	 		console.log(0);
	    };		
	});	
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!