when using this vue.js Multiselect component.
there is 8 dropdown multi-select elements on my form.
When selecting an option from the second dropdown, the onSearchResellerCompanies method gets triggered, instead of the onSearchAgencyCompanies method.
Another thing …
On my form, there is a dropdown element with countries.
If I select a reseller company, and if I then select a country and then select an agency company, the onSearchEnumCountries gets triggered, instead of the onSearchAgencyCompanies method.
So, in all cases, the @search-change event from the last touched dropdown element gets triggered, instead of the onSearchAgencyCompanies method.
This is the html code:
This is the resellect companies dropdown element:
<multiselect
id=”multiselect_drop_down_reseller_companies”
v-model=”drop_down_reseller_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”reseller_companies”
:searchable=”true”
:loading=”drop_down_reseller_companies_selectize_isLoading”
:placeholder=”drop_down_reseller_companies_selectize_placeholder”
@select=”drop_down_reseller_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
@search-change=”onSearchResellerCompanies”>
<span slot=”noResult”>custom no result reseller companies</span>
<span slot=”noOptions”>custom no options reseller companies</span>
</multiselect>
This is the agency companies dropdown element:
<multiselect
id=”multiselect_drop_down_agency_companies”
v-model=”drop_down_agency_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”agency_companies”
:searchable=”true”
:loading=”drop_down_agency_companies_selectize_isLoading”
:placeholder=”drop_down_agency_companies_selectize_placeholder”
@select=”drop_down_agency_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
@search-change=”onSearchAgencyCompanies”>
<span slot=”noResult”>custom no result agency companies</span>
<span slot=”noOptions”>custom no options agency companies</span>
</multiselect>
This is the JS code:
/*
* reseller companies settings
* start
*/
drop_down_reseller_companies_selectize_no_result : ‘no result’,
drop_down_reseller_companies_selectize_isLoading: false,
drop_down_reseller_companies_selectize_placeholder : ‘type the name of a reseller company …’,
drop_down_reseller_companies_selected_default : { id: null, name : ‘type the name of a reseller company …’ },
drop_down_reseller_companies_selected : { id: null, name : ‘type the name of a reseller company …’ },
reseller_companies : [],
/*
* reseller companies
* stop
*/
/*
* agency companies settings
* start
*/
drop_down_agency_companies_selectize_no_result : ‘no result’,
drop_down_agency_companies_selectize_isLoading: false,
drop_down_agency_companies_selectize_placeholder : ‘type the name of a agency company …’,
drop_down_agency_companies_selected_default : { id: null, name : ‘type the name of a agency company …’ },
drop_down_agency_companies_selected : { id: null, name : ‘type the name of a agency company …’ },
agency_companies : [],
/*
* agency companies
* stop
*/
These are the methods :
This method gets trggered when selecting a reseller company:
drop_down_reseller_companies_at_select({id, name}){
consoleService.log(‘drop_down_reseller_companies_at_select’, true);
consoleService.log(‘id’, true);
consoleService.log(id, true);
consoleService.log(‘name’, true);
consoleService.log(name, true);
this.m_record.reseller_id = id;
// optional setting
// this.drop_down_reseller_companies_selectize_placeholder = name;
this.drop_down_reseller_companies_selected = { id: id, name : name };
this.campaigns = [];
//this.m_record.campaign_id = this.m_record_default.campaign_id;
this.m_record.campaign_id = null;
this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
this.client_companies = [];
//this.m_record.client_id = this.m_record_default.client_id;
this.m_record.client_id = null;
this.drop_down_agency_companies_selected = this.drop_down_agency_companies_selected_default;
this.agency_companies = [];
//this.m_record.agency_id = this.m_record_default.agency_id;
this.m_record.agency_id = null;
//consoleService.log(‘m record’, true);
//consoleService.log(this.m_record, true);
this.dynamic_drop_downs_class();
this.populateDropDownAgencyCompanies(id);
},
This method gets triggered when selecting a agency company:
drop_down_agency_companies_at_select({id, name}){
consoleService.log(‘drop_down_agency_companies_at_select’, true);
consoleService.log(‘id’, true);
consoleService.log(id, true);
consoleService.log(‘name’, true);
consoleService.log(name, true);
this.m_record.agency_id = id;
// optional setting
// this.agency_company_selectize_placeholder = name;
this.drop_down_agency_companies_selected = { id: id, name : name };
this.campaigns = [];
//this.m_record.campaign_id = this.m_record_default.campaign_id;
this.m_record.campaign_id = null;
this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
this.client_companies = [];
//this.m_record.client_id = this.m_record_default.client_id;
this.m_record.client_id = null;
//consoleService.log(‘m record’, true);
//consoleService.log(this.m_record, true);
//this.dynamic_drop_downs_class();
//this.populateDropDownClientCompanies(id);
},
This method should get triggered only when searching within the reseller dropdown element:
onSearchResellerCompanies(search, elId){
consoleService.log(‘onSearchResellerCompanies’, true);
consoleService.log(‘element Id’, true);
consoleService.log(elId, true);
consoleService.log(‘search’, true);
consoleService.log(search, true);
if(this.selectize_timestamp){
clearTimeout(this.selectize_timestamp);
}
if(
search.length >= 2 &&
search != this.drop_down_reseller_companies_selected.name
){
consoleService.log(‘onSearchResellerCompanies q >= 2’, true);
this.selectize_timestamp = setTimeout(() => {
this.reseller_companies_selectize_isLoading = true;
//axios start
axios.post(
apiService.API_URL + ‘/resellerCompaniesListSelectize’,
{
token : this.$store.getters.token,
q : search,
}
).then(
(response) => {
this.reseller_companies_selectize_isLoading = false;
consoleService.log(‘administrator form selectize search axios /onSearchResellerCompanies response success’, true);
consoleService.log(response.data, true);
this.reseller_companies = response.data.data;
}
).catch(
(error) => {
// nothing to do here
//consoleService.log(‘administrator form selectize search axios /onSearchResellerCompanies response error’, true);
//consoleService.log(error, true);
}
);
//axios stop
}, 500);
}else{
consoleService.log(‘onSearchResellerCompanies NO’, true);
}
},
This method shoud get triggered only when searching within the agency dropdown element:
onSearchAgencyCompanies(search, elId){
consoleService.log(‘element Id’, true);
consoleService.log(elId, true);
consoleService.log(‘onSearchAgencyCompanies’, true);
consoleService.log(‘search’, true);
consoleService.log(search, true);
if(this.selectize_timestamp){
clearTimeout(this.selectize_timestamp);
}
if(
search.length >= 2 &&
search != this.drop_down_agency_companies_selected.name
){
this.selectize_timestamp = setTimeout(() => {
this.agency_companies_selectize_isLoading = true;
//axios start
axios.post(
apiService.API_URL + ‘/agencyCompaniesListSelectize’,
{
token : this.$store.getters.token,
q : search,
}
).then(
(response) => {
this.agency_companies_selectize_isLoading = false;
consoleService.log(‘administrator form selectize search axios /onSearchAgencyCompanies response success’, true);
consoleService.log(response.data, true);
this.agency_companies = response.data.data;
}
).catch(
(error) => {
// nothing to do here
//consoleService.log(‘administrator form selectize search axios /onSearchAgencyCompanies response error’, true);
//consoleService.log(error, true);
}
);
//axios stop
}, 500);
}
},
Solution :
there is been trying to find a solution to this problem for days now.
After trying all kind of tricks and running all kind of tests, I found out that this form component was working fine on the create scenario and failing on the edit scenario.
A couple of hours ago, I found the BUG.
Make sure that you do not use v-if directives !
Always try and use v-show directives, in order to avoid strange behaviour.
<!– row [ dropdowns companies ] / start –>
<div class=”row”>
<!– dropdown resellers companies / start –>
<div v-show=”show_drop_down(‘const_access_level_reseller’)”
v-bind:class=”drop_down_number_of_columns”>
<div class=”form-group”>
<label>{ translations.reseller_optional | filter_translation_default(‘reseller_optional’) }</label>
<multiselect
id=”multiselect_drop_down_reseller_companies”
name=”multiselect_drop_down_reseller_companies”
autocomplete=”off”
:autocomplete=”off”
v-model=”drop_down_reseller_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”reseller_companies”
:searchable=”true”
:loading=”drop_down_reseller_companies_selectize_isLoading”
:placeholder=”drop_down_reseller_companies_selectize_placeholder”
@select=”drop_down_reseller_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
:clear-on-select=”true”
@search-change=”searchForResellerCompany”>
<span slot=”noResult”>custom no result reseller companies</span>
<span slot=”noOptions”>custom no options reseller companies</span>
</multiselect>
<span class=”text-danger”
v-show=”validationErrorsFormAdministrator.reseller_id”
v-text=”validationErrorsFormAdministrator.reseller_id”></span>
</div>
</div>
<!– dropdown resellers companies / stop –>