Focus styling is not working correctly in a react component?

Question

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.

Your code works.Can you share your component.This is working sandbox https://codesandbox.io/s/ykrn4883kx — Naieem Mahmud Supto, Mar 10 '19 at 10:30
Possible duplicate of [Using :focus to style outer div?](https://stackoverflow.com/questions/7876283/using-focus-to-style-outer-div) — Zeyad Etman, Mar 10 '19 at 10:39

score 4 · Accepted Answer · answered Mar 10 '19 at 11:22

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>

score 0 · Answer 2 · answered Mar 10 '19 at 10:45

0

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

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

answered Mar 10 '19 at 10:45

Soroush Chehresa

5,490
1
14
29

@dwp Don't mention it ;) – Soroush Chehresa Mar 10 '19 at 10:50
1

@dwp This isn't a good practice to do this, it breaks the accessibility, please check my answer https://stackoverflow.com/a/55087153/5721245 – Zeyad Etman Mar 10 '19 at 11:31

Focus styling is not working correctly in a react component?

2 Answers2

Another solution