JavaScript Custom Form elements is a useful jQuery plugin for customising your form elements, in case you have to get away from the default styling of the form elements. However, there’s a tiny “but” with the plugin when you use it with EmberJS. JCF initially designed to be used on the global scope, and in some case (like mine), it’s not what you need.

If you’re using custom select-element with JCF without JCF.Scrollable, the list becomes unusable in few cases:

  1. It overflows the layout of the site
  2. Not keyboard-friendly, when you try to filter the options and not scroll till the end.
  3. When you use Ember addons like emberx-select, it doesn’t like custom data-attributes.

Eventually, using components concept of Ember, it’s easier to isolate the setups of JCF.

In my case, language options have only few options,where I prefer to wrap the native select options:

  import Ember from 'ember';
  
  export default Ember.Component.extend({
    cart: Ember.inject.service('shopping-cart'),
  
    didRender() {
      Ember.run.scheduleOnce('afterRender', function(){
        //#currency-options is the action <select>-element
        jcf.replace('#currency-options','Select', {
          "wrapNative": false,
          "wrapNativeOnMobile": true
        });
      });
    },

And, to avoid custom wrapping of dropdowns, for instance, country list, better to initiate JCF like this:

  import Ember from 'ember';
  
  export default Ember.Component.extend({
    classNames: ['input2','country-list'],
    didRender() {
      Ember.run.scheduleOnce('afterRender', function(){
        jcf.replace('#input2-select','Select');
      })
    }
  });

Few more samples of the code, could be found in gist.