Ant Design：TextArea にフォーカスを移すには

2024.06.08

Next.js で Ant Design を使った際に、TextArea にフォーカスを移すためのメモです。

環境

Next.js v14.2.3
Ant Design v5.18.0

作例

以下のように、カーソルの位置を指定できます。

先頭
末尾
テキストを全選択

"use client"
import { useRef, useState } from "react";
import TextArea from "antd/es/input/TextArea";
import type { TextAreaRef } from "antd/es/input/TextArea";

export default function Home() {
  const textAreaRef = useRef<TextAreaRef>(null);
  const [value, setValue] = useState("");

  const setFocus = (cursor: "start" | "end" | "all") => {
    textAreaRef.current?.focus({ cursor });
  };
  return (
    <div>
      <TextArea
        ref={textAreaRef}
        value={value}
        onInput={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
          setValue(e.target.value)
        }
      ></TextArea>
      <div>
        <button onClick={() => setFocus("start")}>start</button>
      </div>
      <div>
        <button onClick={() => setFocus("end")}>end</button>
      </div>
      <div>
        <button onClick={() => setFocus("all")}>all</button>
      </div>
    </div>
  );
}