Текстовая область внутри элемента `` не отвечает на события щелчка ⇐ CSS

[Anonymous]

У меня есть таблица с 6 столбцами. В одной из ячеек строки я использую элемент textarea для отображения и захвата ввода пользователя.
В настоящее время содержимое внутри текстовой области усекается и применяется эллипс. Взаимодействие, которое я ищу, заключается в том, что когда пользователь нажимает на текстовую область, текстовая область расширяется, чтобы соответствовать всему содержимому, и текст может быть обновлен.
Проблема, с которой я столкнулся это когда вы пытаетесь обновить содержимое в текстовой области. Для длинных строк содержимого нельзя щелкнуть по обернутым текстовым строкам в текстовой области, и фактически текстовый курсор не появляется после первой строки. Это даже при настройке row={n}.
В чем здесь может быть проблема? Мешает ли ячейка таблицы каким-либо образом обработке кликов? Я также заметил, что если я помещу обработчик onClick в текстовую область, он не сработает за пределами первой строки содержимого.
Этот компонент находится внутри элемента < /p>
function DescriptionColumnCell({ initialValue }: { initialValue: string }) {
const [description, setDescription] = useState(initialValue);
const [isFocused, setIsFocused] = useState(false);
const textareaRef = useRef(null);

useEffect(() => {
setDescription(initialValue);
}, [initialValue]);

useEffect(() => {
adjustTextareaHeight();
}, [description]);

const adjustTextareaHeight = () => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
};

const handleFocus = () => {
console.log('handleFocus');
setIsFocused(true);
adjustTextareaHeight();
};

const handleChange = (event: ChangeEvent) => {
setDescription(event.target.value);
};

const handleClick = (event: React.MouseEvent) => {
console.log('event', event);
adjustTextareaHeight();
};
const handleMouseDown = (event: React.MouseEvent) => {
console.log('event', event);
};

const handleOnClick = (event: React.MouseEvent) => {
console.log('handleOnClick', event);
event.stopPropagation();
setIsFocused(true);
};

return (





);
};

и CSS
.description-column-cell {
position: relative;
height: 34px;

.input-element {
width: 100%;
height: 34px;

textarea {
width: 100%;
height: 34px;
padding-block: 8px;
padding-inline: 16px;

font-size: var(--12px);
line-height: var(--leading-normal);
color: var(--text-primary);

border: none;
background-color: transparent;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

resize: none;
display: block;
}
}

&.focused {
.input-element {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;

textarea {
max-height: 200px;
white-space: normal;
overflow: auto;
background-color: var(--background-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
outline: 1px solid var(--border-tertiary);
cursor: text;
position: relative;
z-index: 101;
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... ick-events