sui-search: Autocomplete doesn't show up as the user types from empty search field

[StashAppDev]

Bug description:

I'm seeing an issue with the search component where the autocomplete doesn't show up when the user starts typing into an empty search box. It only shows up after there is already text in the box and the user clicks the search field. I think this got broken in the latest build (0.9.7). I took a look at the compiled script in the debug tools and I'm seeing this:

    Object.defineProperty(SuiSearch.prototype, "query", {
        get: function () {
            return this.searchService.query;
        },
        set: function (query) {
            var _this = this;
            this.selectedResult = undefined;
            // Initialise a delayed search.
            this.searchService.updateQueryDelayed(query, function () {
                // Set the results open state depending on whether a query has been entered.
                return 
                // Set the results open state depending on whether a query has been entered.
                _this.dropdownService.setOpenState(_this.searchService.query.length > 0);
            });
        },
        enumerable: true,
        configurable: true
    });

That return looks like it's not supposed to be there. It doesn't even exist in the TS file https://github.com/edcarroll/ng2-semantic-ui/blob/master/src/modules/search/components/search.ts#L100 .

Link to minimally-working plunker that reproduces the issue:

Hijacking this plnkr from another issue since it displays the same problem as well:

http://plnkr.co/edit/RpMQDS6spIsWXNcMG5JD?p=preview

Version of Angular, ng2-semantic-ui, and Semantic UI:

Angular: 5.2.9

ng2-semantic-ui: 0.9.7

Semantic UI: 2.3.0

[eyalhakim]

I am experiencing the same behavior

[aqmebrak]

I also have the same problem

Angular: 5.2.4 ng2-semantic-ui: 0.9.7 semantic-ui-css: 2.3.1

[pieperu]

I'm also experiencing this issue.

Angular : 6.0.1 semantic-ui: 2.3.1 ng2-semantic-ui: 0.9.7

[hugo-dlb]

I'm also experiencing this issue.

[hugo-dlb]

Are there any work arounds until the fix is accepted ?

[eyalhakim]

@turgodi manually remove the problematic return from the bundle / use my branch

[hugo-dlb]

3 month later and this fix is still not approved... @eyalhakim I'm having trouble using your branch instead of the official one. When I'm doing npm install eyalhakim/ng2-semantic-ui#bugfixes --save it just retrieves the source code but doesn't build like when I do npm install ng2-semantic-ui --save. Since I'm using services like Heroku I can't modify the node_modules source myself to fix the error therefore I really need a clean and working github source that I can just npm install. Could you help me ?

[earbullet]

My workaround for now is to call setOpenState specifically when the search occurs.

<sui-search #searchBox ...>

@ViewChild("searchBox") searchBox;

optionsLookup(s, n): Promise<NameIdPair[]> { this.searchBox.dropdownService.setOpenState(true); return this._userService .searchUsers(s) .toPromise(); }

[eyalhakim]

@turgodi my branch is not published as an npm package. You need to clone the branch to your machine, build the code locally and then include the output in your project.

[hugo-dlb]

I ended up using @earbullet workaround.

Thank you for the help @eyalhakim. :)

[p1ho]

An add-on to @earbullet's solution. The work-around as is doesn't close the dropdown when input is empty for me (Angular@5.2.11, ng2-semantic-ui@0.9.7).

So I had to add a (keyup) attribute to <sui-search> just so I can get that event and close the dropdown appropriately.

component.html

<sui-search #searchBox (keyup)="keyupHandler()">

component.ts

keyupHandler(): void {
  setTimeout(() => {
      let isOpen: boolean = this.searchBox.query != "";
      this.searchBox.dropdownService.setOpenState(isOpen);
  }, 200);
  // the 200 is the default search delay, so the dropdown still syncs with the search result.
}

Admittedly a bit hacky, but it's already hacky setting dropdown open state directly. Hope this helps someone!