Your demo Bootstrap 3 latest version doesn't work

[sn3f]

Describe the bug The Bootstrap 3 demo page doesn't work. Only the Bootstrap 4 demo page work. JSON file is loaded but nothing are displayed ! I get the same issue on my test environment.

To Reproduce Steps to reproduce the behavior:

1. Go to https://raw.githack.com/xcash/bootstrap-autocomplete/master/dist/latest/indexV3.html
2. Type 3 charterers
3. Nothing appear

Expected behavior Suggestions appear..

Desktop (please complete the following information):

• Browser: Chrome Version 85.0.4183.102, Firefox Version 68.12.0esr (32-bit) and IE 11

[Ahmed-Aboud]

works fine with https://cdn.jsdelivr.net/gh/xcash/[email protected]/dist/latest/bootstrap-autocomplete.min.js

[Ahmed-Aboud]

@xcash also these links redirect to localhost:9000

[xcash]

@Ahmed-Aboud those links are for the development environment (as stated above in the README)

[TimmFitschen]

I had the same issue after updating from 2.3.0 to 2.3.7. I downgraded to 2.3.5 and it worked.

I have the impression that a this.show() is missing somewhere around here: https://github.com/xcash/bootstrap-autocomplete/blob/34053e84ed84c63cc506f3e28b78af330736910c/src/dropdownV3.ts#L207

[mbrodala]

The problem is that the .dropdown-menu class is used for autocomplete icons. In Bootstrap dropdowns are only visible if their parent container has the .open class:

https://github.com/twbs/bootstrap/blob/v3.4.1/less/dropdowns.less#L121

This will fix the example:

Without the class the list exists but is never shown:

[xcash]

Hi @mbrodala and thanks. Since I'm currently working with BS4 and 5(alpha) I have no time to try to figure out this bug. Would you mind (or any other who reads) to try to submit a PR to fix it?

[mbrodala]

Interestingly the last working version (2.3.5) also sets display: block somehow/somewhere which makes it work:

[mbrodala]

@xcash It would help if you could make another 2.x release with dist/latest/bootstrap-autocomplete.js not being minified.

In any case I'd expect the following to help:

  public show(): void {
    if (!this.shown) {
      this._dd.dropdown().show();
+     this._dd.parent().addClass('open');
      this.shown = true;
    }
  }

  public hide(): void {
    if (this.shown) {
+     this._dd.parent().removeClass('open');
      this._dd.dropdown().hide();
      this.shown = false;
    }
  }

[mbrodala]

From what I can see the proper fix would be backporting the change in https://github.com/xcash/bootstrap-autocomplete/commit/5129a34e7fd8f33cfc94fb0ed68a42d6fa4c531a (see #83) which was only done for Bootstrap v4 back then.

You can easily confirm that if you enforce Bootstrap 4: the dropdown appears as expected. (But looks broken due to wrong classes of course.)

[mbrodala]

@xcash Can you create a branch for version 2.x first where PRs could be pushed for?

[mbrodala]

Alright, I've ported the fix now: #129

[mbrodala]

@xcash Not sure what to do about the bootstrap-autocomplete.min.js since a gulp test did only update the bootstrap-autocomplete.js.

[penarrocha]

@mbrodala thank you very much, I was getting mad until I noticed the inline styles injected to the UL didn't match in versions prior to 2.3.6