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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

No possibility of filtering in bootstrap modal

Thread ID:

Created:

Updated:

Platform:

Replies:

145367 Jun 19,2019 08:23 AM UTC Jul 3,2019 07:46 AM UTC Vue 8
loading
Tags: DropDownList
Tomasz Tomczykiewicz
Asked On June 19, 2019 08:23 AM UTC

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
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


Tomasz Tomczykiewicz
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


Tomasz Tomczykiewicz
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


Tomasz Tomczykiewicz
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon