title: How to not trigger onBlur when dropdown is clicked
body: <p>I have a dropdown component that autocompletes email inputs on click.</p>
  <pre><code>import React from 'react'
  import styles from './email-select-box.module.scss'
  
  const EmailSelectBox = ({ email, setEmail, setShowEmailList }) =&gt; {
    return (
      &lt;ul className={styles.emailSelectBox}&gt;
        &lt;li onClick={() =&gt; { setShowEmailList(false); setEmail(`${email}@gmail.com`) }}&gt;{email}@gmail.com&lt;/li&gt;
        &lt;li onClick={() =&gt; { setShowEmailList(false); setEmail(`${email}@naver.com`) }}&gt;{email}@naver.com&lt;/li&gt;
        &lt;li onClick={() =&gt; { setShowEmailList(false); setEmail(`${email}@hanmail.com`) }}&gt;{email}@hanmail.net&lt;/li&gt;
        &lt;li onClick={() =&gt; { setShowEmailList(false); setEmail(`${email}@hotmail.com`) }}&gt;{email}@hotmail.com&lt;/li&gt;
      &lt;/ul&gt;
    )
  }
  
  export default EmailSelectBox
  </code></pre>
  <p>The component is used in the following context</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import EmailSelectBox from '../../components/email-select-box'
  import styles from './b-type-05.module.scss'
  
  const Input = () =&gt; {
    const [email, setEmail] = useState('')
    const [showEmailList, setShowEmailList] = useState(false)
  
    const openEmailList = () =&gt; {
      setShowEmailList(true)
      // delete email options (ex: @gmail.com) when input is clicked
      setEmail(email.replace(/@.*/g, ''))
    }
  
    return (
      &lt;div className=&quot;form-wrap input-wrap  form-info-wrap&quot; onBlur={() =&gt; {setShowEmailList(false)}}&gt;
        &lt;input type=&quot;text&quot; title=&quot;&quot; placeholder=&quot;ex) abc@abc.com&quot; value={email} onChange={e =&gt; setEmail(e.target.value)} onClick={() =&gt; { openEmailList() }} /&gt;
        {showEmailList &amp;&amp; (
          &lt;EmailSelectBox email={email.replace(/@.*/g, '')} setEmail={setEmail} setShowEmailList={setShowEmailList} /&gt;
        )}
        {email &amp;&amp; (
          &lt;span className='tc-blue form-info'&gt;
            Please check your email for spelling errors :)
          &lt;/span&gt;
        )}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I would like the <code>EmailSelectBox</code> dropdown to disappear when the user</p>
  <ol>
  <li>Clicks on an email option</li>
  <li>Clicks away from the input field</li>
  </ol>
  <p>I resolved 1) by activating <code>setShowEmailList(false)</code> whenever an email option is clicked.</p>
  <p>I thought using <code>onBlur={() =&gt; {setShowEmailList(false)}}</code> on the parent <code>div</code> would resolve 2), but what happens is that when the <code>EmailSelectBox</code> dropdown is clicked, the dropdown disappears before it can activate <code>setEmail</code> and autocomplete the email address.</p>
  <p>My bandaid solution was to add a separate <code>handleBlur</code> function</p>
  <pre><code>  const handleBlur = () =&gt; {
      setTimeout(() =&gt; {
        setShowEmailList(false)
      }, 300)
    }
  </code></pre>
  <p>and pass it to my parent <code>div</code></p>
  <pre><code>&lt;div className=&quot;form-wrap input-wrap  form-info-wrap&quot; onBlur={handleBlur}&gt;
  </code></pre>
  <p>This &quot;works&quot;, as the dropdown immediately disappears when it is clicked after updating the email state. But there is a notable delay of the dropdown disappearing when the user clicks aways from the input. And if I set the <code>setTimeout</code> time to be <code>100</code>, there is a risk that the the dropdown disappears before updating the email state.</p>
  <p>Why is this bug occurring and is there a cleaner solution to my problem?</p>