mirror of
https://github.com/pretix/pretix.git
synced 2026-05-18 17:24:03 +00:00
[A11y] widget fix filter dropdown auto-submit not allowed
This commit is contained in:
@@ -1171,15 +1171,27 @@ Vue.component('pretix-widget-event-form', {
|
|||||||
Vue.component('pretix-widget-event-list-filter-field', {
|
Vue.component('pretix-widget-event-list-filter-field', {
|
||||||
template: ('<div class="pretix-widget-event-list-filter-field">'
|
template: ('<div class="pretix-widget-event-list-filter-field">'
|
||||||
+ '<label :for="id">{{ field.label }}</label>'
|
+ '<label :for="id">{{ field.label }}</label>'
|
||||||
+ '<select :id="id" :name="field.key" @change="onChange($event)" :value="currentValue">'
|
+ '<select ref="select" :id="id" :name="field.key" @focus="onFocus" @keydown="onKeydown" @click="onChange" :value="currentValue">'
|
||||||
+ '<option v-for="choice in field.choices" :value="choice[0]">{{ choice[1] }}</option>'
|
+ '<option v-for="choice in field.choices" :value="choice[0]">{{ choice[1] }}</option>'
|
||||||
+ '</select>'
|
+ '</select>'
|
||||||
+ '</div>'),
|
+ '</div>'),
|
||||||
props: {
|
props: {
|
||||||
field: Object
|
field: Object
|
||||||
},
|
},
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
valueOnFocus: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onFocus: function (event) {
|
||||||
|
this.valueOnFocus = this.$refs.select.value;
|
||||||
|
},
|
||||||
onChange: function(event) {
|
onChange: function(event) {
|
||||||
|
if (this.valueOnFocus == this.$refs.select.value) {
|
||||||
|
// no change
|
||||||
|
return;
|
||||||
|
}
|
||||||
var filterParams = new URLSearchParams(this.$root.filter);
|
var filterParams = new URLSearchParams(this.$root.filter);
|
||||||
if (event.target.value) {
|
if (event.target.value) {
|
||||||
filterParams.set(this.field.key, event.target.value);
|
filterParams.set(this.field.key, event.target.value);
|
||||||
@@ -1190,6 +1202,14 @@ Vue.component('pretix-widget-event-list-filter-field', {
|
|||||||
this.$root.loading++;
|
this.$root.loading++;
|
||||||
this.$root.reload();
|
this.$root.reload();
|
||||||
},
|
},
|
||||||
|
onKeydown: function (e) {
|
||||||
|
const keyDown = e.key !== undefined ? e.key : e.keyCode;
|
||||||
|
if ( (keyDown === 'Enter' || keyDown === 13) || (['Spacebar', ' '].indexOf(keyDown) >= 0 || keyDown === 32)) {
|
||||||
|
// (prevent default so the page doesn't scroll when pressing space)
|
||||||
|
e.preventDefault();
|
||||||
|
this.onChange(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
id: function () {
|
id: function () {
|
||||||
|
|||||||
Reference in New Issue
Block a user