Search not working in combination with modal
kg-bot opened this issue · 5 comments
I'm using bootstrap-vue modal https://bootstrap-vue.js.org/docs/components/modal/ together with your plugin and search is not working, I can't even click on search input field, and this is because of d-block class that's used on modal, if I go to inspect of that class and disable and again enable it's css search is working.
Code for this look's like this
<template>
<b-modal :title="trans.get('__JSON__.Create new product group')"
id="newGroupModal"
ref="newGroupModal"
@hidden="onHidden"
@shown="onShow"
hide-footer>
<b-form @submit.prevent="onSubmit">
<b-form-group :label="trans.get('__JSON__.Name')">
<b-input v-model="form.name"
required
:placeholder="trans.get('__JSON__.Name')"></b-input>
</b-form-group>
<b-form-group :label="trans.get('__JSON__.Attributes')">
<v-selectpage :data="attributes"
:multiple="true"
language="en"
ref="attributes"
v-model="form.attributes">
</v-selectpage>
</b-form-group>
<b-form-group :label="trans.get('__JSON__.Rackbeat number')">
<b-input v-model="form.rackbeat_number"
required
:placeholder="trans.get('__JSON__.Rackbeat number')"></b-input>
</b-form-group>
<b-btn type="submit"
variant="info">{{ trans.get('__JSON__.Submit') }}
</b-btn>
</b-form>
</b-modal>
</template>
<script>
export default {
name: 'new-group-modal',
props: {
url: {
default: '',
type: String,
},
attributes: {
default: [],
type: Array,
},
},
data() {
return {
form: {
name: null,
attributes: '',
rackbeat_number: null,
},
};
},
methods: {
onSubmit() {
this.form.attributes = (this.form.attributes !== '') ? this.form.attributes.split( ',' ) : [];
this.$http.post( this.url, this.form ).then( response => {
this.form = {
name: null,
attributes: '',
rackbeat_number: null,
};
this.$refs.attributes.$emit( 'clear' );
this.$refs.attributes.pageChange( 1 );
this.$eventHub.$emit( 'group-created', response.data.data );
this.$refs.newGroupModal.hide();
this.$toasted.show( this.trans.get( '__JSON__.Product group created successfully' ), {
duration: 4000,
type: 'success',
} );
}, response => {
if ( Array.isArray( this.form.attributes ) ) {
this.form.attributes = this.form.attributes.join( ',' );
}
let _this = this;
if ( response.data.errors !== undefined ) {
Object.values( response.data.errors ).forEach( function ( error ) {
_this.$toasted.show( error[ 0 ], {
duration: 4000,
type: 'error',
} );
} );
} else if ( response.data.message !== undefined ) {
_this.$toasted.show( response.data.message, {
duration: 4000,
type: 'error',
} );
}
} );
},
onHidden() {
this.$refs.attributes.$emit( 'clear' );
this.$refs.attributes.pageChange( 1 );
},
},
};
</script>v-selectpage have not pageChange api, your code this.$refs.attributes.pageChange( 1 ); will not working.
if ( Array.isArray( this.form.attributes ) ) {
this.form.attributes = this.form.attributes.join( ',' );
}You bind v-selectpage data source to form.attributes, when running above code, Array data type change to String, and plugin may run error.
When search not working, try open chrome dev tools(F12 key), switch to console panel to check error logs
1.) pageChange does work
2.) There are no errors, modal has overlay functionality which you don't handle very well, probably in your css,, because this same code for v-selectpage does work when used outside of modal
And yes, everything is working, I can select items, it does update, when I close modal it fires clear event and it does change page with pageChange() (you have this method in mixins/methods ), only thing that does not work inside modal is search, you can't even click on that input field, just like it's disabled because of modal, if I go to inspect and find d-block bootstrap class and just toggle css for that class search is then working as expected.
Not a very big issue 👍
if you use bootstrap modal just remove tabindex="-1" in your modal
source
Search not working problem fixed in 2.1.0
You should disables the enforce focus routine which maintains focus inside the modal with no-enforce-focus
<b-modal
....
no-enforce-focus
>
All modal properties here
https://bootstrap-vue.org/docs/components/modal#comp-ref-b-modal-props