How to add exception on click (JS)

Question

There is a search field which is hidden by the overflow:hidden property, when you press the CLICK button the search field moves to the left. I tried to make the search box move to the right when clicking on any area except for the block itself, but I have a bug.

  Bug: I can’t enter anything in the search field, the block immediately shifts to the right =(

How to make a block move backward when clicking on any area other than the area of ​​the block itself.

PS. I am still new to JS. Please don't scold me =(

let search_block = document.querySelector(".main_text_field"); 

document.body.addEventListener('click', function(e){  
let x = e.target.className;

if(x == 'open_man_block'){
search_block.style.marginRight = '10px';
}

else if(x =='main_text_field'){  // ****** My unsuccessful attempt to fix the bug ****** 
search_block.style.marginRight = '10px';
} 

else{
search_block.style.marginRight = '';        
}

});

.search_man_block{
display:grid;
grid-template-columns: repeat(2, max-content); 
border:1px solid black;
justify-content: end;
overflow:hidden;        
}
.open_man_block{
margin-top:15px;
border:1px solid black; 
}
.main_text_field{
margin-top:15px;    
margin-right:-430px;
width:400px;    
display:grid;
grid-template-columns: repeat(3, max-content); 
font-size:17px;
font-family:arial;
border-radius:15px;
box-shadow: 0 0 7px 1px #87cefa;
overflow:hidden;
background: rgba(255, 255, 255, 1);
transition: margin-right 1s;
}
.seacrh_text_field{
width:300px;
padding-left:10px;  
border:none;
outline:none;
}
.text_delete_button{
margin-left:10px;
border:none;
width:36px;
height:36px;    
background: rgba(255, 255, 255, 1);
color:red;
font-size:26px;
}
.text_search_button{
border:none;    
background: rgba(255, 255, 255, 1);
width:36px;
height:36px;    
background-size: cover;
background-image: url("");   
}

<div class="search_man_block">
<div class="open_man_block">CLICK</div>

<form class="main_text_field"  role="search" method="get" id="searchform" action="" >
    
    <input type="hidden" value="post" name="post_type" />
    <label class="screen-reader-text" for="s"> </label>
    <input class="seacrh_text_field" type="text" value="" name="s" id="s" />    
    <input type="button" class="text_delete_button"  value="&#10006;">
    <input type="submit" class="text_search_button" id="searchsubmit" value="" />
    
</form>

</div>
  

Answer 1

There You Go. You Only Needed To Remove The Else Statement At The Last And Change The Class Name Of Else If To That Of The Cross Button.

let search_block = document.querySelector(".main_text_field"); 

document.body.addEventListener('click', function(e){  
let x = e.target.className;

if(x == 'open_man_block'){
search_block.style.marginRight = '10px';
}

else if(x =='text_delete_button'){  
search_block.style.marginRight = '';
} 


});

.search_man_block{
display:grid;
grid-template-columns: repeat(2, max-content); 
border:1px solid black;
justify-content: end;
overflow:hidden;        
}
.open_man_block{
margin-top:15px;
border:1px solid black; 
}
.main_text_field{
margin-top:15px;    
margin-right:-430px;
width:400px;    
display:grid;
grid-template-columns: repeat(3, max-content); 
font-size:17px;
font-family:arial;
border-radius:15px;
box-shadow: 0 0 7px 1px #87cefa;
overflow:hidden;
background: rgba(255, 255, 255, 1);
transition: margin-right 1s;
}
.seacrh_text_field{
width:300px;
padding-left:10px;  
border:none;
outline:none;
}
.text_delete_button{
margin-left:10px;
border:none;
width:36px;
height:36px;    
background: rgba(255, 255, 255, 1);
color:red;
font-size:26px;
}
.text_search_button{
border:none;    
background: rgba(255, 255, 255, 1);
width:36px;
height:36px;    
background-size: cover;
background-image: url("");   
}

<div class="search_man_block">
<div class="open_man_block">CLICK</div>

<form class="main_text_field"  role="search" method="get" id="searchform" action="" >
    
    <input type="hidden" value="post" name="post_type" />
    <label class="screen-reader-text" for="s"> </label>
    <input class="seacrh_text_field" type="text" value="" name="s" id="s" />    
    <input type="button" class="text_delete_button"  value="&#10006;">
    <input type="submit" class="text_search_button" id="searchsubmit" value="" />
    
</form>

</div>