title: How to programmatically expand React Reach UI (@reach/menu-button) Menu?
body: <p>I am using introduction package called <code>intro.js</code> and after certain step I would like to click on my dropdown menu and present the dropdown menu. The issue I am having is that <code>.click</code> event doesn't work, while <code>.focus</code> does. I have <code>console.log()</code> which fires but the dropdown never opens for some reason. Here is the code:</p>
  <pre><code>import &quot;./styles.css&quot;;
  import React, {useRef} from 'react'
  import { Steps, Hints } from &quot;intro.js-react&quot;;
  import {
    Menu,
    MenuList,
    MenuButton,
    MenuItem,
    useMenuButtonContext,
  } from &quot;@reach/menu-button&quot;;
  
  
  
  export default function App() {
  
    const myRef = useRef(null)
  
    const [state, setState] = React.useState({
        stepsEnabled: true,
        initialStep: 0,
        steps: [
          {
            element: &quot;.hello&quot;,
            intro: &quot;Hello step&quot;
          },
          {
            element: &quot;.world&quot;,
            intro: &quot;World step&quot;
          }
        ],
        hintsEnabled: true,
        hints: [
          {
            element: &quot;.hello&quot;,
            hint: &quot;Hello hint&quot;,
            hintPosition: &quot;middle-right&quot;
          }
        ]
      })
  
  
  
    // This event fires after 2 seconds of closing the introduction tour
    const onExit = () =&gt; {
      setTimeout(() =&gt; {myRef.current.click(), console.log(&quot;this is the first message&quot;)}, 2000);
    }
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;Steps
            enabled={state.stepsEnabled}
            steps={state.steps}
            initialStep={state.initialStep}
            onExit={onExit}
          /&gt;
               &lt;h1 className=&quot;hello&quot;&gt;Hello,&lt;/h1&gt;
          &lt;hr /&gt;
          &lt;h1 className=&quot;world&quot;&gt;World!&lt;/h1&gt;
          &lt;hr /&gt;
        &lt;Menu&gt;
        &lt;MenuButton id=&quot;example-button&quot; ref={myRef} onClick={()=&gt; console.log('clicked')}&gt;
          Actions &lt;span aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;
        &lt;/MenuButton&gt;
        &lt;MenuList&gt;
          &lt;MenuItem &gt;
            Download
          &lt;/MenuItem&gt;
          &lt;MenuItem &gt;
            Create a Copy
          &lt;/MenuItem&gt;
          &lt;MenuItem &gt;
            Mark as Draft
          &lt;/MenuItem&gt;
          &lt;MenuItem &gt;
            Delete
          &lt;/MenuItem&gt;
        &lt;/MenuList&gt;
      &lt;/Menu&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Basically once I close the introduction tour (modal) I would like to to have dropdown open. Here is a link to Codesandbox of this example: <a href="https://codesandbox.io/s/relaxed-swartz-8b8s6?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/relaxed-swartz-8b8s6?file=/src/App.js</a></p>
  <p>P.s Sorry for bad code format and no refactoring, this is only a PoC!</p>