title: Input ref inside Popup is never acquired in Semantic UI React
body: <p>I have simple popup in Semantic UI React that contains an input field. This input field should be focused immediately when the popup is opened. No luck so far. This is what I've tried:</p>
  
  <pre><code>import * as React from 'react';
  import { Input, Label, Popup, Segment } from 'semantic-ui-react';
  
  export class Test extends React.Component {
      private searchInput: React.RefObject&lt;Input&gt;;
  
      constructor(props: any) {
          super(props);
          this.searchInput = React.createRef();
      }
  
      public render() {
          return (
              &lt;Popup
                  trigger={&lt;Label&gt;Test&lt;/Label&gt;}
                  content={this.renderSelector()}
                  on="hover"
                  hoverable={true}
                  position="bottom left"
                  onOpen={() =&gt; this.focusInput()}
              /&gt;
          )
      }
  
      private renderSelector() {
          return (
              &lt;Segment&gt;
                  &lt;Input ref={this.searchInput} fluid={true} icon="search" iconPosition="left" /&gt;
              &lt;/Segment&gt;
          )
      }
  
      private focusInput() {
          if (this.searchInput.current) {
              this.searchInput.current.focus()
          }
      }
  }
  </code></pre>
  
  <p><code>this.searchInput.current</code> is always null. I also tried to wrap the Input in a <code>Ref</code> component, but with the same result:</p>
  
  <pre><code>    private renderSelector() {
          return (
              &lt;Segment&gt;
                  &lt;Ref innerRef={this.searchInput}&gt;
                      &lt;Input fluid={true} icon="search" iconPosition="left" /&gt;
                  &lt;/Ref&gt;
              &lt;/Segment&gt;
          )
      }
  </code></pre>
  
  <p>Finally, even when trying to find the Input in the DOM, I get a null result:</p>
  
  <pre><code>    private renderSelector() {
          return (
              &lt;Segment&gt;
                  &lt;Input id="foobar" fluid={true} icon="search" iconPosition="left" /&gt;
              &lt;/Segment&gt;
          )
      }
  
      private focusInput() {
          const foo = document.getElementById("foobar");
          if (foo) {
              const bar = foo as HTMLInputElement;
              bar.focus();
          }
      }
  </code></pre>
  
  <p>Any idea what I am missing here? </p>
  
  <p>Thanks!</p>