We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

No possibility of filtering in bootstrap modal

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

8 Replies

TT Tomasz Tomczykiewicz June 19, 2019 08:53 AM UTC

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


PO Prince Oliver Syncfusion Team June 19, 2019 10:46 AM UTC

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.  
     
     
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 



TT Tomasz Tomczykiewicz June 19, 2019 09:30 PM UTC

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


PO Prince Oliver Syncfusion Team June 20, 2019 12:08 PM UTC

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 
 
Regards, 
Prince 



TT Tomasz Tomczykiewicz June 21, 2019 08:28 AM UTC

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


PO Prince Oliver Syncfusion Team June 24, 2019 09:30 AM UTC

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 



TT Tomasz Tomczykiewicz July 2, 2019 06:39 AM UTC

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


PO Prince Oliver Syncfusion Team July 3, 2019 07:46 AM UTC

Hi Tomasz,   

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

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon