CODEWITHSUNDEEP
cssreactjssass
Phakamani Xulu
Phakamani Xulu

Reputation: 269

css or react Keep border focus when clicking my eye button

I have a login page where I set border colors on focus and I want to keep the focus even when I'm clicking my eye password toggleI have attached a gif that shows how I loose my focus state when toggling my eye

Upvotes: 0

Views: 67

Answers (1)

cbr
cbr

Reputation: 13662

One way to do it is to store a ref to the password input field, and call focus() on it in the eye's onClick handler:

import React, { useRef } from "react";

const Eye = ({ onClick }) => <span onClick={onClick}>eye</span>;

export default function App() {
  const inputRef = useRef();

  const handleEyeClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <Eye onClick={handleEyeClick} />
    </div>
  );
}

Upvotes: 2

Related Questions