quasar
quasar copied to clipboard
quasarframework
[QSelect][Safari] After select an option it scrolls to top of screen
What happened?
When you select any option on QSelect it scrolls to top of screen.
What did you expect to happen?
It should not scroll to top of screen
Reproduction URL
https://jsfiddle.net/q8c1xvkb/
How to reproduce?
REPRODUCTION 1
- Scroll down and select an option
- After selecting an option it scrolls up to top of screen.
REPRODUCTION 2
- Go to QSelect docs https://quasar.dev/vue-components/select#introduction
- Then select any option on examples.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Safari
Quasar info output
No response
Relevant log output
No response
Additional context
No response
I tried the JSFiddle, the reference to the docs and in a freshly generated Vite project. I seem to have the expected outcome on Safari (Version 15.4 (17613.1.17.1.13)).
What version are you on?
@robsontenorio Were you able to verify? If so, this issue can be closed.
@bartduisters I can't verify because I can't go back to macOS 12 right now.
I am on macOS 13 beta2 and here it does not work.
Sorry opened a dup(#14625 ) for this. I can confirm this happens on 16.0 on the docs page https://quasar.dev/vue-components/select
Also I noticed that it does not occur when using the multiple tag.
A few other Notes as I am trying to find a work around: This also happens when tabbing to or from the qselect using Tab or Shift-Tab. The q-select is properly focused but the page scrolls to the top. Also happens when clear an existing selection that is clearable. If you use the Arrow keys to make a selection the press return or spacebar, it does NOT scroll Only occurs when using the mouse or tab key.
If you can look at the difference between making a selection using the arrow and enter keys and the click event that is likely the problem.
Okay so a clunky work around is to use the multiple tag and limit the max values to one:
<q-select
:options="['1', '2', '3']"
multiple
max-values="1"
v-model="countArray"
emit-value
></q-select
It looks like ~IE11~ Safari has some problems with focusing 0 size elements :)
Add this to your css file until this fix is released
.q-select__focus-target, .q-select__autocomplete-input {
width: 1px;
height: 1px;
}
Please tell me if it happens even with this fix (Safari on macos or ios)
It looks like ~IE11~ Safari has some problems with focusing 0 size elements :)
Add this to your css file until this fix is released
.q-select__focus-target, .q-select__autocomplete-input { width: 1px; height: 1px; }Please tell me if it happens even with this fix (Safari on macos or ios)
Added to app.scss and it behaves as expected thank you!!
