Search & searchable Dropdown: `Results not found` message is rendered while `loading` is still true & onFocus

Bug Report

A Search component displays No results found message while loading. In a searchable Dropdown, on focus before a search has been made and while loading this message is also displayed.

renderOptions() in Dropdown.js & renderMenuContent() in SearchResults.js do not check for loading or query value which would cause this behaviour. Adding && !loading to the if statements would fix this.

Steps

Create a search component as per Semantic’s standard example (see CodePen) and search for data. Create a Form with a Field. The field should have controls set to a {Dropdown} component as per Semantic’s Forms.Field component example but with searchable variations (see CodePen). Search with text.

Expected Result

The components should not show the No Results Found Message if the results are only loading. The component should not show this message just because the query is empty.

Actual Result

The message is shown in these situations.

Version

0.78.2

Testcase

https://codesandbox.io/s/n7pq0nkqr4

[fredrikolovsson]

@levithomason would you accept a PR with a fix according to @daveJS133 suggestion? I’m encountering this too.

[winchell]

This seems to work.

<Search
  ...
  loading={loading}
  showNoResults={loading ? false : true}
/>