title: How to show focus on select in table row?
body: <p>Here is code I have written so far :</p>
  <pre><code> &lt;td style={{ color: &quot;white&quot;, width: &quot;250px&quot; }}&gt;{comment.SlugName}&lt;/td&gt;
                                  &lt;td style={{ color: &quot;white&quot;, width: &quot;250px&quot; }}&gt;
  
                                      &lt;select id=&quot;lang&quot; value={comment.ChannelName} autoFocus
                                          className=&quot;btn_primary&quot; onChange={e =&gt; setPlayer(e.target.value, comment.idx)} &gt;
  
                                          {ChannelnameDisp.map((val) =&gt; {
                                              setCHANNEL = val;
                                              return (
                                                  &lt;&gt;
                                                      &lt;option value=&quot;select&quot; value={val ? val : &quot;&quot;}&gt;{val}&lt;/option&gt;
                                                  &lt;/&gt;
                                              )
                                          })
                                          }
                                          &lt;option &gt;{comment.ChannelName === ChannelName ? &quot;default&quot; : comment.ChannelName}&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/td&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/wqTos.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wqTos.png" alt="enter image description here" /></a>
  The problem is that I'm not able to show the focus on the select which is inside the table row. I want to show same background color as a table row  focus but only select one is not focus. Here is the picture how it looks like right now :</p>