<td>textarea 不响应单击事件

Question

我有一个有 6 列的表格。在其中一个行单元格中，我使用

textarea

元素来显示和捕获用户输入。

目前，文本区域内的内容被截断并应用椭圆。我正在寻找的交互是当用户单击文本区域时，文本区域会扩展以适合整个内容并且文本可以更新。

我遇到的问题是当您尝试更新文本区域中的内容时。对于长内容字符串，您无法单击文本区域中的换行文本行，并且实际上文本光标不会出现在第一行之后。即使在调整

row={n}

时也是如此。

这里可能出现什么问题？表格单元格是否以某种方式干扰点击处理？我还注意到，如果我在文本区域上放置一个 onClick 处理程序，它不会触发超出第一行内容的内容。

该组件位于

<td>

元素内

function DescriptionColumnCell({ initialValue }: { initialValue: string }) {
  const [description, setDescription] = useState(initialValue);
  const [isFocused, setIsFocused] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(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<HTMLTextAreaElement>) => {
    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 (
    <div className={`${styles['description-column-cell']} ${isFocused ? styles['focused'] : ''}`}>
      <div
        className={`${styles['input-element']}`}
        onClick={handleOnClick}
      >
        <textarea
          ref={textareaRef}
          onClick={handleClick}
          value={description}
          placeholder="description"
          onChange={handleChange}
          onFocus={handleFocus}
          rows={1}
          style={{ overflow: 'hidden' }}
        />
      </div>
    </div>
  );
};

和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;
      }
    }
  }
}

Answer 1

这是一个非常快速的浏览，但事实上你只能点击第一行，这是一个很大的线索，所以我检查了溢出和高度。

而且，在我看来，TEXTAREA 元素比它的父元素更大。您已将父 div 硬编码为 34px，但文本区域也是 34px，但填充大小看起来为 32px，因此我认为总高度将接近 66px。

您没有

box-sizing

设置，因此默认情况下它应该使用内容大小，其中不包括填充。

虽然文本区域隐藏了溢出，但其父级却没有，因此当文本区域在输入元素之外中断时，其中的一部分可能无法单击