2

I have a scenario where I need to make the textarea focused even if I interact with other components like a dropdown. I know we can't have two elements focused simultaneously but I am wondering if this can be done using refs in react.

I have seen sites like JIRA, which do these kind of things. Eg: In the image below, the date input remains in focus even if I interact with the above calendar.

enter image description here

This is my code. I want the Textarea component to be in focus even if we interact with the Dropdown component. How to achieve this in react?

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Textarea />
      <br />
      <Dropdown />
    </div>
  );
}

function Textarea() {
  return <textarea rows="10" cols="40"></textarea>;
}

function Dropdown() {
  return (
    <select>
      <option>Pizza</option>
      <option>Pasta</option>
      <option>Burger</option>
    </select>
  );
}
Stack
  • 429
  • 1
  • 4
  • 12
  • Rather than using a native ` – Patrick Roberts Dec 06 '20 at 08:58
  • 1
    If you mean that you want the ` – Patrick Roberts Dec 06 '20 at 09:00
  • @PatrickRoberts Yes. Textarea and Select are associated closely. In my real problem, the Dropdown is placed inside the Textarea in top-right position. Textarea accepts some answer and Dropdown selects a language by which the answer gets converted into that language automatically. – Stack Dec 06 '20 at 09:03

0 Answers0