QSelect multiple closes on every user action (selection/deselection)

[smriti-akridata]

trafficstars

What happened?

Application uses vue3 + ts + quasar-v2. QSelect with multiple is used, but as soon as the user selects any option, the dropdown closes and each time user has to open it and make the selection.

The array associated with multiple has all the options, but QSelect being closed on every selection is the problem.

This is only happening in projects created with this particular package.json file, otherwise QSelect multiple feature works fine:

"dependencies": {
  "@quasar/extras": "^1.11.4",
  "@types/vue-i18n": "^7.0.0",
  "axios": "^0.20.0",
  "core-js": "^3.6.5",
  "d3": "^6.2.0",
  "echarts": "^5.1.2",
  "lodash": "~4.17.20",
  "qs": "^6.9.6",
  "quasar": "^2.2.1",
  "rison": "^0.1.1",
  "textarea-caret": "^3.1.0",
  "vue": "3.0.0",
  "vue-i18n": "^9.1.5",
  "vue-router": "^4.0.12"
},
"devDependencies": {
  "@types/d3": "^5.16.3",
  "@types/echarts": "^4.9.8",
  "@types/lodash": "^4.14.160",
  "@types/node": "^14.17.32",
  "@types/rison": "0.0.6",
  "@types/textarea-caret": "^3.0.1",
  "@types/webpack-env": "^1.16.3",
  "@typescript-eslint/eslint-plugin": "^4.18.0",
  "@typescript-eslint/parser": "^4.18.0",
  "@vue/cli-plugin-babel": "^4.5.14",
  "@vue/cli-plugin-eslint": "^4.5.14",
  "@vue/cli-plugin-router": "^4.5.14",
  "@vue/cli-plugin-typescript": "^4.5.16",
  "@vue/cli-plugin-unit-jest": "^4.5.15",
  "@vue/cli-service": "~4.5.0",
  "@vue/compiler-sfc": "3.0.0",
  "@vue/eslint-config-prettier": "^6.0.0",
  "@vue/eslint-config-typescript": "^7.0.0",
  "@vue/test-utils": "^2.0.0-0",
  "babel-plugin-transform-imports": "2.0.0",
  "eslint": "^7.0.0",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-vue": "^7.0.0",
  "node-sass": "^4.14.0",
  "prettier": "^2.2.1",
  "sass": "~1.27.0",
  "sass-loader": "^10.0.3",
  "typescript": "~4.1.5",
  "vue-cli-plugin-quasar": "~4.0.4",
  "vue-jest": "^5.0.0-0"
}

After debugging the Quasar code, I found that

1. inside file QSelect.js (node_modules/quasar/src/components/select/QSelect.js) there is an event handler which is not being called ( onBeforeShow: onControlPopupShow ) for the above package.json projects. I couldn’t find the reason why it is not being called on ‘before-show’ event, but if we attach this method on ‘onShow' then everything works fine.

This handler is setting a variable “state.hasPopupOpen = true”, and based on this the focus/no-focus is decided.

2. With Vue v2 + Quasar v1, this feature was working as expected.

What did you expect to happen?

Expected QSelect multiple feature to behave seamlessly with all dependencies and dev-dependencies. QSelect with mutiple feature should not get closed on every selection the user makes.

Reproduction URL

https://github.com/smriti-akridata/QSelect-bug.git

How to reproduce?

1. clone the shared git hub repo
2. run npm i and npm run serve
3. after the app runs, there is a QSelect with multiple added and with @popup-hide="onPopupHide" @popup-show="onPopupShow". Do some operations on it and observe the behaviour.
4. QSelect multiple closes on every user action (Select/ de-select) and the methods for popup hide and show are also not called.

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, iOS

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[pdanpdan]

Hello. Sorry I missed this issue - if it's still happening can you please try to remove textarea-caret and see if this is the cause?

[smriti-akridata]

yes, the issue is still there even after removing textarea-caret.

[pdanpdan]

A few things:

• you use options API but return a ref in data (it is a double reactive variable)
• @input is no longer emitted by quasar, and it might cause problems

Unfortunately I cannot npm install the packages - I get lots of errors.