title: How to properly control focus and blur events on a React-Bootstrap InputGroup?
body: <p>I have a single input element from react-bootstrap that will allow the user to change the field value and 2 buttons will appear, one to accept the changes and the other will cancel the changes leaving the original value in.</p>
  <p>I manage to control the focus and blur events by delegating the listeners to the wrapping component, my thinking is that since the focus is still within the wrapping component, I won't lose its focus, but pressing the inner buttons seems to blur the focus, therefore the Accept and Cancel buttons don't fire any events...</p>
  <p>Here is my code example:</p>
  <p><a href="https://codesandbox.io/s/edit-cell-form-w4g47?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Edit Cell Form" /></a></p>
  <pre class="lang-js prettyprint-override"><code>import { useState, useEffect, useRef } from &quot;react&quot;;
  import { InputGroup, Button, FormControl } from &quot;react-bootstrap&quot;;
  
  import &quot;./styles.css&quot;;
  
  const InputField = ({ title }) =&gt; {
    const formRef = useRef(null);
    const [value, setValue] = useState(title);
    const [toggleButtons, setToggleButtons] = useState(false);
  
    const onChange = (e) =&gt; {
      setValue(e.target.value);
    };
  
    const onFocus = () =&gt; {
      setToggleButtons(true);
    };
  
    const onBlur = () =&gt; {
      setToggleButtons(false);
    };
  
    const acceptChange = () =&gt; {
      console.log(&quot;Accept&quot;);
      setToggleButtons(false);
    };
  
    const cancelChange = () =&gt; {
      console.log(&quot;Cancel&quot;);
      setToggleButtons(false);
    };
  
    useEffect(() =&gt; {
      const form = formRef.current;
      form.addEventListener(&quot;focus&quot;, onFocus);
      form.addEventListener(&quot;blur&quot;, onBlur);
  
      return () =&gt; {
        form.removeEventListener(&quot;focus&quot;, onFocus);
        form.removeEventListener(&quot;blur&quot;, onBlur);
      };
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;InputGroup className=&quot;m-3&quot; style={{ width: &quot;400px&quot; }}&gt;
          &lt;FormControl
            ref={formRef}
            value={value}
            onChange={onChange}
            // onFocus={onFocus}
            // onBlur={onBlur}
          /&gt;
          {toggleButtons ? (
            &lt;InputGroup.Append&gt;
              &lt;Button variant=&quot;outline-secondary&quot; onClick={() =&gt; acceptChange()}&gt;
                Accept
              &lt;/Button&gt;
              &lt;Button variant=&quot;outline-secondary&quot; onClick={() =&gt; cancelChange()}&gt;
                Cancel
              &lt;/Button&gt;
            &lt;/InputGroup.Append&gt;
          ) : null}
        &lt;/InputGroup&gt;
      &lt;/div&gt;
    );
  };
  
  export default function App() {
    return (
      &lt;&gt;
        &lt;InputField title={&quot;Input 1&quot;} /&gt;
        &lt;InputField title={&quot;Input 2&quot;} /&gt;
        &lt;InputField title={&quot;Input 3&quot;} /&gt;
        &lt;InputField title={&quot;Input 4&quot;} /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>