Parece que seu sistema gera um span
com a tag
que na verdade fica fora do input
e não dentro dele, isso dificulta um pouco pra fazer só com CSS, uma alternativa é gerar esse span
depois do input
pra facilitar de colocar a tag caso tenha alguma interação no input
acima.
Agora vamos ao código. O único JS que usei, puro, foi para vc poder focar em um input que está dentro de uma div
clicando na própria div
, tirando isso não precisa mais de JS para nada. Então se clicar na div pai
foca no input filho
que está dentro ok.

Na imagem acima, o span
que vai aparecer com a tag
fica com display:block
, e só vai aparecer se o input
acima tiver algum valor dentro. para fazer essa validação eu uso :not(placeholder-shown)
, para saber mais leia aqui Função - mostrar senha! que falo um pouco mais sobre isso.
Existe uma propriedade de CSS chamada :focus-within
ela serve para estilizar um elemento caso algum filho dentro dele seja focado. Isso é nativo do CSS e é com essa pseudo-classe que eu coloco a cor na div
quando foco
no input
dentro dela
E para "remover" o input eu concateno a técnica assima com um :not(focus)
, fica assim input:not(:placeholder-shown):not(:focus)
. Então se não tiver placeholder
pq logicamente tem algum valor dentro e não estiver focado, logicamente pq vc clicou fora o input
some.
Para tirar o input
da tela eu usei o mesmo CSS que o Bootstrap usa na classe sr-only
, esse CSS não tira o input
da tela com display:none
, pois isso atrapalha a acessibilidade, sr-only
apenas não deixa o input
visível para os usuários "normais", mas o input
continua acessível para os leitores de tela screen-readers
Segue o código com o exemplo. tudo com CSS (js só para focar o input quando clica na div, se vc precisar disso...)
var pai = document.querySelectorAll('.react-tagsinput');
var inp = document.querySelectorAll('.react-tagsinput-input');
function foca() {
inp.forEach( (tag) => {
tag.focus();
})
}
pai.forEach( (el) => {
el.addEventListener('click', foca);
})
* {
box-sizing: border-box;
}
.react-tagsinput {
padding: 20px;
border: 1px solid #000;
}
.react-tagsinput:focus-within {
background-color: tomato;
}
.react-tagsinput:focus-within .react-tagsinput-input {
height: 50px;
}
.react-tagsinput .react-tagsinput-input + span {
display: none;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown) + span {
display: block;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown):not(:focus){
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
<div class="react-tagsinput">
<input type="text" class="react-tagsinput-input" placeholder="com placeholder">
<span class="react-tagsinput-tag">tag</span>
</div>