Неправильное поведение пользовательского заполнителя ⇐ CSS

[Anonymous]

У меня есть следующий компонент React

Код: Выделить всё

import { useRef } from "react";
import classes from "./styles/Input.module.css";

function Input({
children,
inputID = "default",
iconSrc = "icons/person.svg",
hasIcon = false,
inputType = "text",
}) {
const input = useRef(null);
const placeholder = useRef(null);

function animatedPlaceholder(event) {
console.log(event);
if (document.activeElement === input.current || event.target.value !== "") {
placeholder.current.classList.add(classes["input-text-placeholder-up"]);
return;
}
placeholder.current.classList.remove(classes["input-text-placeholder-up"]);
}

return (

className={classes["input-text-container"]}
>
{hasIcon ? (
[img]{iconSrc} onClick={() =[/img]
 input.current.focus()} />
) : (
""
)}

 {input.current.focus();}}
>
{children}



);
}

export default Input;
< /code>
И это стили для этого компонента < /p>
:root {
--icon-padding: 60px;
--icon-size: 28px;
}

.input-text-container {
position: relative;
width: 100%;
cursor: text;
}

.input-text-container:focus {
outline: 1px solid #0053A4;
}

.input-text {
box-sizing: border-box;
font-family: Roboto-Regular;
font-size: 18px;
border: 2px solid #0053A4;
border-radius: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 17px;
padding-bottom: 17px;
width: 100%;
z-index: 1;
}

.input-text-placeholder {
box-sizing: border-box;
position: absolute;
top: 0;
left: 12px;
transform: translateY(-50%);
font-size: 18px;
color: rgb(110, 110, 110);
top: 50%;
z-index: 1;
transition: top .15s, font-size .15s;
user-select: none;
}

.input-text-placeholder-up {
font-size: 12px;
top: 20%;
}

.input-text:focus {
outline: 1px solid #0053A4;
}

.with-icon {
padding-left: var(--icon-padding);
}

.placeholder-with-icon {
left: var(--icon-padding);
}

.input-text-icon {
position: absolute;
top: 50%;
left: calc((var(--icon-padding) - var(--icon-size)) / 2);
width: var(--icon-size);
height: var(--icon-size);
transform: translateY(-50%);
z-index: 1;
}

.input-text-label {
display: block;
user-select: none;
margin-bottom: 8px;
}

Проблема в том, что при поднятии элемента div, который действует как заполнитель (т. е. класс input-text-placeholder-up зависает на это), затем, когда вы нажимаете на него, он падает обратно, вместо того, чтобы оставаться на месте, как должно. Как я понимаю, проблема в том, что событие onBlur элемента input идет первым, а по всем условиям функции AnimatedPlaceholder плейсхолдер должен быть опущен, и соответственно , он опущен, и щелчок по нему не успевает пройти, потому что он изменил свое положение. Что делать в таком случае? Как я могу покинуть класс input-text-placeholder-up, если я нажму на заполнитель, в котором уже есть этот класс?

Подробнее здесь: https://stackoverflow.com/questions/793 ... laceholder