textarea inside a “ element is not responding to click events

I have a table with 6 columns. In one of the row cells I am using a textarea element to display and capture user input.

Currently, the content inside the text area is truncated and an ellipse is applied. The interaction that I’m looking for is when the user clicks into the textarea, the textarea is expanded to fit the whole content and the text can be updated.

The problem I run up against is when you try to update the content in the textarea. For long content strings you cannot click on the wrapped text lines in the textarea, and actually the text cursor doesn’t appear after the first line.This is even when adjusting for row={n}.

What can be the issue here? Is the table cell somehow interfering with the click handling? I also notice that if I place an onClick handler on the textarea it doesn’t trigger beyond the first line of content.

This component is inside a <td> element

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

and the 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;
      }
    }
  }
}

You need to sign in to view this answers