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

smriti-akridata commented 2 years ago

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

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.

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?

clone the shared git hub repo
run npm i and npm run serve
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.
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 commented 2 years ago

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 commented 2 years ago

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

pdanpdan commented 2 years ago

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.

quasarframework / quasar