No possibility of filtering in bootstrap modal

[Tomasz Tomczykiewicz]

Hi,

I use Bootstrap v4. I added DropDownList control in modal and I can't filter elements of the list.

I attach an example project. You have to install dependencies (command "yarn") and then serve the project (command "yarn serve"). Open a browser and go to localhost:8080.

Best regards,

Tomasz Tomczykiewicz

Attachment: ddl_7570a157.zip

[Tomasz Tomczykiewicz]

Additionally, there is a problem with show-clear-button. When you set it to true and open the drop down list, the clear button disappears.

Attachment: Zrzut_ekranu_20190619_o_10.49.53_1a6b6905.zip

[Prince Oliver]

Hello Tomasz, 

Thank you for contacting us. 

Query 1: I use Bootstrap v4. I added DropDownList control in modal and I can't filter elements of the list. 

This issue occurs due to the bootstrap modal enforcing the focus on itself, when an element which is not a child element of bootstrap modal gets focused. The dropdown’s popup will be rendered in as child to body element out of the modal and hence when it is opened the input is focused out. Kindly refer to the following online blogs for further reference on this issue.  

     

Link 1: https://github.com/sweetalert2/sweetalert2/issues/374       

Link 2: https://github.com/twbs/bootstrap/issues/19971       

     

This issue can be resolved this issue by unbinding the focusin modal event in show modal event as per the suggestion given in the above blogs.     

 

<script> 

import Vue from 'vue'; 

import JQuery from 'jquery'; 

import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

Vue.use(DropDownListPlugin); 

 

let $ = JQuery; 

 var searchData = [ 

   { Index: "s1", Country: "Alaska" }, { Index: "s2", Country: "California" }, 

   { Index: "s3", Country: "Florida" }, { Index: "s4", Country: "Georgia" } 

]; 

  

 

export default { 

  name: 'HelloWorld', 

  data() { 

    return { 

      dataSource : searchData, 

      fields : { text: "Country", value: "Index" }, 

      allowFiltering: true, 

      showClearButton: true 

    } 

  }, 

  methods: { 

    filtering: function(e) { 

      e.updateData(searchData); 

    } 

  }, 

  mounted(){ 

    $('#exampleModal').on('shown.bs.modal', function () {     

        $(document).off('focusin.modal');     

    });     

  }, 

} 

</script> 

   

We have attached the modified sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/145367/ze/ddl1636402387  

Query 2: there is a problem with show-clear-button. When you set it to true and open the drop down list, the clear button disappears. 

The clear icon is shown only when the input element in focused. When the popup with filtering enabled is opened, the input inside the popup will be focused and hence the clear icon is removed. This is the control’s intended behavior. 

     

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Tomasz Tomczykiewicz]

Thanks for the help, it solved my problem.

For all modals you can also write: 
$.fn.modal.Constructor.prototype._enforceFocus = function() {};

But I found some other problem. If you use :item-template and you search for some data, next close the drop down list and reopen it, you have matching elements (not all elements). But when I remove :item-template, I have all elements after reopening the drop down list. I attached the example.

Attachment: ddl_b87377ea.zip

[Prince Oliver]

Hello Tomasz, 

 

Good day to you. 

 

Thank you for sharing your solution with us. We have validated the reported issue in our end. We are considering this as a defect. The fix for the issue will be included in our upcoming Volume 2 SP1 release which is expected in the month of July 2019. You can track the status of the issue through the following feedback portal link and contact us for any further queries 

https://www.syncfusion.com/feedback/7029 

 

Regards, 

Prince 

[Tomasz Tomczykiewicz]

Hi,

I think I found another bug. When you have selected item (you pass it by v-model), but you wait for data from your API. Then data from API is received but the DropDownList displays the placeholder (it should display the selected item).

Best regards,

Tomasz Tomczykiewicz

Attachment: ddl_8b01d4cb.zip

[Prince Oliver]

Hi Tomasz,  

  

Good day to you. 

We have checked the reported scenario in our end. It seems that you have set the dataSource as null and value property has been set during the initialization. Also, you have updated the dataSource in mounted method. The mounted will be called after the instance has been created (i.e.) after the component has been rendered. So during the initialization of component, the value property is compared to empty dataSource and if the dataSource is empty the value is not set. Hence, we suggest you update the value again in the mounted method or update the value when the dataSource is not empty. Please refer to the follwoing code snippet 

mounted() { 

  setTimeout(() => { 

    this.dataSource = searchData; 

    this.$refs.drop.ej2Instances.value = 's3'; 

  }, 1000); 

}, 

We have attached the sample for your reference, please find it in the following location: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ddl_8b01d4cb216697291 

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Tomasz Tomczykiewicz]

Thanks for your answer. I solved it in a little bit different way- I use computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter

[Prince Oliver]

Hi Tomasz,   

Thank you for sharing your solution with us. We are glad that the issue is resolved in your end. 

Regards, 

Prince