How do I shadow a div if it's child element is focused?-CodePudding

I basically want searchBarFirstDiv to form a shadow when searchBarInput is selected

I am using REACT.

Here's my HTML for reference:

<div className={css.searchBarFirstDiv}>
  <label className={css.searchBarDivContent} for="location-search-input">
     <div className={css.searchBarHeadingFont}>Location</div>
       <input
          id="location-search-input"
          placeholder="Where are you going?"
          className={css.searchBarInput}
        />            
  </label>
</div>

How do I do this?

CodePudding user response：

Pure CSS solution

#main {
  padding: 30px;
  margin: 31px;
}

#main:focus-within {
  box-shadow: 0px 0px 10px red;
}

<div id="main">
  <input type="text" id="input" placeholder="focus me!">
</div>

CodePudding user response：

Vanilla JS approach:

document.getElementsByClassName('searchBarInput')[0]
.addEventListener('focus', function(){
  
    triggerFocus(document.getElementsByClassName('searchBarFirstDiv')[0]);

});

// Thanks to: https://stackoverflow.com/a/52450494/1352994
function triggerFocus(element) {
    var eventType = "onfocusin" in element ? "focusin" : "focus",
        bubbles = "onfocusin" in element,
        event;

    if ("createEvent" in document) {
        event = document.createEvent("Event");
        event.initEvent(eventType, bubbles, true);
    }
    else if ("Event" in window) {
        event = new Event(eventType, { bubbles: bubbles, cancelable: true });
    }

    element.focus();
    element.dispatchEvent(event);
}