title: React Web// iOS like select dropdown on mobile
body: <p>I have a web project built with React. I am trying to open an iOS like select dropdown when user clicks the 'category image button' like the images below. </p>
  
  <h1>What I expect</h1>
  
  <p>When I click the 'category image button', iOS like dropdown options should appear.</p>
  
  <h1>My code logic</h1>
  
  <ol>
  <li><p>select default style is 'display: none'.</p></li>
  <li><p>when 'category image button' is clicked, it will change 'showWishSelect' state to true &amp; trigger the select click action using select ref.</p></li>
  <li>once 'showWishSelect' state is set to true, the style of select will be set to 'display: initial'.</li>
  <li>then the select options appear. [ image 3 ]</li>
  </ol>
  
  <h1>Issue</h1>
  
  <p>When I click the 'category image button', [ image 1 ]</p>
  
  <p>It will display the select input box which I don't want it to be shown in the first place. [ image 2 ]</p>
  
  <p>then I have to click the select input box again to open the dropdown select options. [ image 3 ]</p>
  
  <p>The 'selectRef.click()' doesn't seem to be triggered.</p>
  
  <h1>Code</h1>
  
  <pre><code>state = {
      showWishSelect: false,
    };
  
  onShowWishSelect = () =&gt; {
      this.setState({ ...this.state, showWishSelect: true });
      this.selectRef.click();
    };
  
  return (
    &lt;div className="mobile_filter_icon profile_filter_icon" onClick={this.onShowWishSelect}&gt;
      &lt;select
       size="4"
       style={{ display: this.state.showWishSelect ? 'initial' : 'none' }}
       ref={(select) =&gt; { this.selectRef = select; }}
       onChange={(e) =&gt; this.onCategory(e.target.value)}
       value={categoryId || 'current-wish'}
      &gt;
       {allWishCategories.length
         ? allWishCategories.map((data, index) =&gt; (
           &lt;option key={index} value={data.categoryId}&gt;
             {data.name}
           &lt;/option&gt;
         )): null}
       &lt;/select&gt;
    &lt;/div&gt;
  )
  
  /* CSS */
  .mobile_filter_icon{ background:url("/.../web/2019/search/btn_filter_right_n.png") no-repeat; width:28px; height:27px; background-size: 28px 27px; }
  .mobile_filter_icon.profile_filter_icon { position: absolute; right: 0px; border-radius: 1px; }
  </code></pre>
  
  <h1>What I have tried..</h1>
  
  <ol>
  <li>delay selectRef.click() event</li>
  </ol>
  
  <pre><code>onShowWishSelect = () =&gt; {
      this.setState({ ...this.state, showWishSelect: true });
      setTimeout(() =&gt; this.selectRef.click(), 1000);
    };
  
  </code></pre>
  
  <ol start="2">
  <li>disable the default select style and add 'category image' to select tag.</li>
  </ol>
  
  <pre><code>&lt;select
    size="4"
    className="mobile_filter_icon profile_filter_icon"
    onChange={(e) =&gt; this.onCategory(e.target.value)}
    value={categoryId || 'current-wish'}
  &gt;
    {allWishCategories.length
      ? allWishCategories.map((data, index) =&gt; (
        &lt;option key={index} value={data.categoryId}&gt;
           {data.name}
        &lt;/option&gt;
      ))
     : null}
  &lt;/select&gt;
  
  
  /* CSS */
  .mobile_filter_icon.profile_filter_icon { position: absolute; right: 0px; border-radius: 1px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
  </code></pre>
  
  <h2>image 1. category button image</h2>
  
  <p><a href="https://i.stack.imgur.com/6sJ0D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6sJ0D.jpg" alt="category button image"></a></p>
  
  <h2>image 2. [ bug ] select input box is displayed</h2>
  
  <p><a href="https://i.stack.imgur.com/6Ozh4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Ozh4.jpg" alt="bug: select input box is displayed"></a></p>
  
  <h2>image 3. category dropdown options</h2>
  
  <p><a href="https://i.stack.imgur.com/CAmeD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CAmeD.jpg" alt="category dropdown options"></a></p>
  
  <p>Thanks for your help in advance !! :)</p>