When using the selected slot of ui.select, the panel is not displayed immediately. #2518
Labels
Comments
|
Hu, this is strange. Thanks for reporting this issue, @CrystalWindSnake! Here's an even more compact reproduction: with ui.select(['a', 'b']).add_slot('selected'):
with ui.element('q-chip'):
ui.label('a')
ui.select(['a', 'b']).add_slot('selected', r'<q-chip><div>a</div></q-chip>') |
|
I checked both cases and they end up generating the same html snippet. Don't understand why there is a difference in effect |
|
@falkoschindler I seem to have found the problem, here is a reproduction of the problem using quasar. <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.14.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="works-app"> </div>
<div id="issue-app"> </div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.14.5/dist/quasar.umd.prod.js"></script>
<script type="module">
const { createApp } = Vue
const works_app = createApp({
render() {
return Vue.h(Quasar.QSelect, {
filled: true,
modelValue: [],
options: ['a', 'b'],
label: "works",
multiple: true,
emitValue: true,
mapOptions: true
}, {
selected: (props) => Vue.h(Quasar.QChip, {
innerHTML: 'a'
})
})
}
}
).use(Quasar).mount('#works-app');
const issue_app = createApp({
render() {
return Vue.h(Quasar.QSelect, {
filled: true,
modelValue: [],
options: ['a', 'b'],
label: "Multi with toggle",
multiple: true,
emitValue: true,
mapOptions: true
}, {
selected: (props) => Vue.h({
template: `<q-chip>a</q-chip>`
})
})
}
}
).use(Quasar).mount('#issue-app');
</script>
</body>
</html>When we render the entire slot string as a component into a virtual node, it seems that this virtual node will be rebuilt when clicked, ultimately causing the click to fail. In addition, this problem leads to another small issue. When using a checkbox in a table slot, the checkbox's toggle transition animation will fail |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
When using the
selectedslot ofui.selectas text, need to click twice for the options panel to be displayed.In addition, the
selected-itemslot also has this problemThe text was updated successfully, but these errors were encountered: