Skip to content

Commit 4e0fa29

Browse files
rstoenescurstoenescu
committed
fix(QCheckbox/QToggle/QRadio): event management when clicked or pressing enter/space (+ consistency) when standalone or in a label
1 parent 61e8270 commit 4e0fa29

File tree

7 files changed

+182
-20
lines changed

7 files changed

+182
-20
lines changed

‎ui/dev/components/form/checkbox.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
<q-checkbox v-model="checked" label="Label" :dark="dark" :dense="dense" :keep-color="keepColor" />
2828

2929
<q-checkbox v-model="checked" label="Checkbox Label" :dark="dark" :dense="dense" :keep-color="keepColor" />
30-
<q-checkbox v-model="checked" no-focus color="teal" label="Checkbox Label - skip focus" :dark="dark" :dense="dense" :keep-color="keepColor" />
3130
<q-checkbox v-model="checked" color="orange" label="Checkbox Label" :dark="dark" :dense="dense" :keep-color="keepColor" />
3231

3332
<p class="caption">
@@ -134,7 +133,43 @@
134133
/>
135134

136135
<p class="caption">
137-
Inside of a List
136+
Inside a Label
137+
</p>
138+
<div class="column q-gutter-y-sm">
139+
<label>
140+
<q-checkbox v-model="checked" color="orange" label="Checkbox - own label" :dark="dark" :dense="dense" :keep-color="keepColor" />
141+
</label>
142+
143+
<label tabindex="0">
144+
<q-checkbox v-model="checked" color="orange" label="Checkbox - own label (tabindex)" :dark="dark" :dense="dense" :keep-color="keepColor" />
145+
</label>
146+
147+
<label>
148+
<q-checkbox v-model="checked" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
149+
Checkbox - external label
150+
</label>
151+
152+
<label tabindex="0">
153+
<q-checkbox v-model="checked" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
154+
Checkbox - external label (tabindex)
155+
</label>
156+
157+
<q-field v-model="checked" label="Checkbox field" stack-label :dark="dark" :dense="dense">
158+
<template v-slot:control="{ value, emitValue }">
159+
<q-checkbox
160+
:value="value"
161+
@input="emitValue"
162+
color="orange"
163+
:dark="dark"
164+
:dense="dense"
165+
:keep-color="keepColor"
166+
/>
167+
</template>
168+
</q-field>
169+
</div>
170+
171+
<p class="caption">
172+
Inside a List
138173
</p>
139174
<q-list :dark="dark" :dense="dense">
140175
<q-item tag="label">

‎ui/dev/components/form/radio.vue‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,90 @@
6767
/>
6868

6969
<p class="caption">
70-
Inside of a List
70+
Inside a Label
71+
</p>
72+
<div class="column q-gutter-y-sm">
73+
<div class="row q-col-gutter-x-sm">
74+
<label class="col">
75+
<q-radio v-model="option" val="opt1" color="orange" label="Radio Opt 1 - own label" :dark="dark" :dense="dense" :keep-color="keepColor" />
76+
</label>
77+
<label class="col">
78+
<q-radio v-model="option" val="opt2" color="orange" label="Radio Opt 2 - own label" :dark="dark" :dense="dense" :keep-color="keepColor" />
79+
</label>
80+
</div>
81+
82+
<q-separator />
83+
84+
<div class="row q-col-gutter-x-sm">
85+
<label tabindex="0" class="col">
86+
<q-radio v-model="option" val="opt1" color="orange" label="Radio Opt 1 - own label (tabindex)" :dark="dark" :dense="dense" :keep-color="keepColor" />
87+
</label>
88+
<label tabindex="0" class="col">
89+
<q-radio v-model="option" val="opt2" color="orange" label="Radio Opt 2 - own label (tabindex)" :dark="dark" :dense="dense" :keep-color="keepColor" />
90+
</label>
91+
</div>
92+
93+
<q-separator />
94+
95+
<div class="row q-col-gutter-x-sm">
96+
<label class="col">
97+
<q-radio v-model="option" val="opt1" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
98+
Radio Opt 1 - external label
99+
</label>
100+
<label class="col">
101+
<q-radio v-model="option" val="opt2" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
102+
Radio Opt 2 - external label
103+
</label>
104+
</div>
105+
106+
<q-separator />
107+
108+
<div class="row q-col-gutter-x-sm">
109+
<label tabindex="0" class="col">
110+
<q-radio v-model="option" val="opt1" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
111+
Radio Opt 1 - external label (tabindex)
112+
</label>
113+
<label tabindex="0" class="col">
114+
<q-radio v-model="option" val="opt2" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
115+
Radio Opt 2 - external label (tabindex)
116+
</label>
117+
</div>
118+
119+
<q-separator />
120+
121+
<div class="row q-col-gutter-x-sm">
122+
<q-field v-model="option" label="Radio Opt 1 field" stack-label :dark="dark" :dense="dense" class="col">
123+
<template v-slot:control="{ id, value, emitValue }">
124+
<q-radio
125+
:for="id"
126+
:value="value"
127+
val="opt1"
128+
@input="emitValue"
129+
color="orange"
130+
:dark="dark"
131+
:dense="dense"
132+
:keep-color="keepColor"
133+
/>
134+
</template>
135+
</q-field>
136+
<q-field v-model="option" label="Radio Opt 2 field" stack-label :dark="dark" :dense="dense" class="col">
137+
<template v-slot:control="{ value, emitValue }">
138+
<q-radio
139+
:value="value"
140+
val="opt2"
141+
@input="emitValue"
142+
color="orange"
143+
:dark="dark"
144+
:dense="dense"
145+
:keep-color="keepColor"
146+
/>
147+
</template>
148+
</q-field>
149+
</div>
150+
</div>
151+
152+
<p class="caption">
153+
Inside a List
71154
</p>
72155
<q-list :dark="dark" :dense="dense">
73156
<q-item tag="label">

‎ui/dev/components/form/toggle.vue‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,43 @@
9393
/>
9494

9595
<p class="caption">
96-
Inside of a List
96+
Inside a Label
97+
</p>
98+
<div class="column q-gutter-y-sm">
99+
<label>
100+
<q-toggle v-model="checked" color="orange" label="Toggle - own label" :dark="dark" :dense="dense" :keep-color="keepColor" />
101+
</label>
102+
103+
<label tabindex="0">
104+
<q-toggle v-model="checked" color="orange" label="Toggle - own label (tabindex)" :dark="dark" :dense="dense" :keep-color="keepColor" />
105+
</label>
106+
107+
<label>
108+
<q-toggle v-model="checked" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
109+
Toggle - external label
110+
</label>
111+
112+
<label tabindex="0">
113+
<q-toggle v-model="checked" color="orange" :dark="dark" :dense="dense" :keep-color="keepColor" />
114+
Toggle - external label (tabindex)
115+
</label>
116+
117+
<q-field v-model="checked" label="Toggle field" stack-label :dark="dark" :dense="dense">
118+
<template v-slot:control="{ value, emitValue }">
119+
<q-toggle
120+
:value="value"
121+
@input="emitValue"
122+
color="orange"
123+
:dark="dark"
124+
:dense="dense"
125+
:keep-color="keepColor"
126+
/>
127+
</template>
128+
</q-field>
129+
</div>
130+
131+
<p class="caption">
132+
Inside a List
97133
</p>
98134
<q-list :dark="dark" :dense="dense">
99135
<q-item tag="label">

‎ui/src/components/checkbox/QCheckbox.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,7 @@ export default Vue.extend({
6868
this.disable !== true && content.unshift(
6969
h('input', {
7070
staticClass: 'q-checkbox__native q-ma-none q-pa-none invisible',
71-
attrs: { type: 'checkbox' },
72-
on: cache(this, 'inp', { change: this.toggle })
71+
attrs: { type: 'checkbox' }
7372
})
7473
)
7574

@@ -96,7 +95,8 @@ export default Vue.extend({
9695
attrs: { tabindex: this.computedTabindex },
9796
on: cache(this, 'inpExt', {
9897
click: this.toggle,
99-
keydown: this.__keyDown
98+
keydown: this.__onKeydown,
99+
keyup: this.__onKeyup
100100
})
101101
}, child)
102102
}

‎ui/src/components/radio/QRadio.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,6 @@ export default Vue.extend({
6464
if (this.disable !== true && this.isTrue !== true) {
6565
this.$emit('input', this.val)
6666
}
67-
},
68-
69-
__keyDown (e) {
70-
if (e.keyCode === 13 || e.keyCode === 32) {
71-
this.set(e)
72-
}
7367
}
7468
},
7569

@@ -86,8 +80,7 @@ export default Vue.extend({
8680
this.disable !== true && content.unshift(
8781
h('input', {
8882
staticClass: 'q-radio__native q-ma-none q-pa-none invisible',
89-
attrs: { type: 'checkbox' },
90-
on: cache(this, 'inp', { change: this.set })
83+
attrs: { type: 'radio' }
9184
})
9285
)
9386

@@ -114,7 +107,16 @@ export default Vue.extend({
114107
attrs: { tabindex: this.computedTabindex },
115108
on: cache(this, 'inpExt', {
116109
click: this.set,
117-
keydown: this.__keyDown
110+
keydown: e => {
111+
if (e.keyCode === 13 || e.keyCode === 32) {
112+
stopAndPrevent(e)
113+
}
114+
},
115+
keyup: e => {
116+
if (e.keyCode === 13 || e.keyCode === 32) {
117+
this.set(e)
118+
}
119+
}
118120
})
119121
}, child)
120122
}

‎ui/src/components/toggle/QToggle.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@ export default Vue.extend({
5858
this.disable !== true && inner.unshift(
5959
h('input', {
6060
staticClass: 'q-toggle__native absolute q-ma-none q-pa-none invisible',
61-
attrs: { type: 'checkbox' },
62-
on: cache(this, 'inp', { change: this.toggle })
61+
attrs: { type: 'checkbox' }
6362
})
6463
)
6564

@@ -86,7 +85,8 @@ export default Vue.extend({
8685
attrs: { tabindex: this.computedTabindex },
8786
on: cache(this, 'inpExt', {
8887
click: this.toggle,
89-
keydown: this.__keyDown
88+
keydown: this.__onKeydown,
89+
keyup: this.__onKeyup
9090
})
9191
}, child)
9292
}

‎ui/src/mixins/checkbox.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,13 @@ export default {
8686
this.$emit('input', val)
8787
},
8888

89-
__keyDown (e) {
89+
__onKeydown (e) {
90+
if (e.keyCode === 13 || e.keyCode === 32) {
91+
stopAndPrevent(e)
92+
}
93+
},
94+
95+
__onKeyup (e) {
9096
if (e.keyCode === 13 || e.keyCode === 32) {
9197
this.toggle(e)
9298
}

0 commit comments

Comments
 (0)