Select stops working randomly in Chrome in macOS

[voltuer]

latest macOS Catalina, latest Vuesax 3, latest NodeJS 12, latest Chrome (80), NPM

As this video shows, the Select component stops working out of nothing, I'm just unable to use it on Chrome. Just open the Select documentation page and play around clicking selectors and then clicking out side. Some times it works for a while and stops working, and some times it stops working at the first or second use.

https://youtu.be/LahMHi9WAuU

[ghost]

Same issue here. I have to reload the page, or click 3/4 times to make it work.

[omarhen]

+1

[voltuer]

Project is completely abandoned

[bradapeter]

+1

[ivangreve]

Same issue! +1

[ivangreve]

I found the error in the "event.target.closest" in vsSelect.vue , and I change this method for event.target.getElementsByClassName().
I wait for the merge!

    clickBlur(event) {
      //let closestx = event.target.closest(".vs-select--options");
      let closestx = event.target.getElementsByClassName(
        "vs-select--options"
      )[0];
      if (!closestx) {
        this.closeOptions();
        if (this.autocomplete) {
          this.filterItems("");
        }
        this.changeValue();
      }
    },

[voltuer]

@ivangreve awesome!! I hope somebody merges it

[okrulik]

+1

[okrulik]

@ivangreve your patch have to be improved for cases if there are no options in select
event.target.getElementsByClassName(
"vs-select--options"
) -- this can be empty

[ivangreve]

Yes, you´re right. Now I'm using this piece of code

  let closestx;
  if (event.target == document.body) {
    closestx = event.target.getElementsByClassName("vs-select--options")[0];
  } else {
    closestx = event.target.closest(".vs-select--options");
  }

[okrulik]

@ivangreve more safe is
let closestx;
if (event.target == document.body) {
closestx = event.target.getElementsByClassName("vs-select--options").item(0);
} else {
closestx = event.target.closest(".vs-select--options");
}

also there is issue with this component where there are no options (vs-select-item) in it. when you click it it will looks strange have no idea how to fix it

[fbasar]

+1

[voltuer]

I mailed the author a month ago with no answer so far, I hope he's ok

[okrulik]

I switched to vue-select as this one has so many issues

[fbasar]

I fixed this problem please use https://www.npmjs.com/package/fvuesax

[yusrenaltair]

I fixed this problem please use https://www.npmjs.com/package/fvuesax

Select working normally, but the table doesn't working at all.
Check these fiddle
Vuesax Original Source
Yours

[CaptainCannabis]

I fixed this problem please use https://www.npmjs.com/package/fvuesax

i can confirm that the vs-select of that repo is working. Only changed vs-select-component and kept vs-select-item and vs-select-group from vuesax 3.11.15.

You see any problems with that? @fbasar

[lbatistela]

This issue can be reproduced by clicking and holding on the vs-select for more than 100ms. On Chrome, the mouse button release fires the click event which in turn closes the options. On Firefox it works properly because the click event is not fired at this time. That's why it stops working randomly.

Changing mouse events from click to mousedown in vsSelect.vue worked out for me. Increasing setTimeout delay also works.

focus() {
  this.active = true;
  this.setLabelClass(this.$refs.inputSelectLabel, true);
  let inputx = this.$refs.inputselect;
  setTimeout(() => {
    // document.addEventListener("click", this.clickBlur);
    document.addEventListener("mousedown", this.clickBlur);
  }, 100);
  ...
}

[leoclo]

+1