CODEWITHSUNDEEP
javascripthtmlcssreactjsfrontend
dwp
dwp

Reputation: 958

Focus styling is not working correctly in a react component?

Problem:

I have created a react application there I am creating a custom search box.

<div className="search-box">
  <Row>
    <div className="search-box-icon">
      <i className="fas fa-search" />
    </div>
    <input
      className="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>

This is my css stylings.

.search-box-icon {
  margin-left: 1%;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus {
  outline-color: #53c9fc;
  outline-width: 2px;
}

What I need to do is add an outline to search-box div when someone starts to type something on the textbox. The things I have done does not seem to be work. Can someone help me to solve this issue? Thank you.

Upvotes: 1

Views: 16397

Answers (2)

Zeyad Etman
Zeyad Etman

Reputation: 2540

You can't do this using css/html without tabindex and according to MDN:

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using an <div> element to describe a button, instead of the <button> element.

and w3 says:

The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.

So the best practice for this is using addEventListener() in JavaScript, But if you want to use tabindex don't forget to add tabindex to inner html content.

Another solution

You don't have to use tabindex if you just want to change the div border. you can use :focus-within and just change the border.

.search-box {
  margin-left: 1%;
  outline: red;
  border: 1px solid #fc3;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus-within {
  border: 2px solid #53c9fc;
}
<div class="search-box">
  <Row>
    <div class="search-box-icon">
    </div>
    <input
      class="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>

Upvotes: 4

Soroush Chehresa
Soroush Chehresa

Reputation: 5678

You can't do focus on a div tag without tabindex.

<div 
  className="search-box" 
  tabIndex="1" // add this line
>
  ...
</div>

Upvotes: 0

Related Questions