javascript error in choices.js

[dolphinsd]

Is there a way to remove choicesjs from the option?

Please upgrade "choices.js": "^8.0.0", to latest version of 9.0.1 as we are running into javascript error if values for dropdown have spaces.

core.js:4002 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'element' of undefined TypeError: Cannot read property 'element' of undefined at ChoicesWrapper._removeEventListeners (choices.js:4222) at ChoicesWrapper.destroy (choices.js:3176) at SelectComponent.detach (Select.js:1276) at SelectComponent.destroy (Component.js:562) at Webform.removeComponent (NestedComponent.js:433) at NestedComponent.js:660 at Array.forEach () at Webform.destroyComponents (NestedComponent.js:659) at Webform.destroy (NestedComponent.js:649) at Webform.destroy (Webform.js:926) at resolvePromise (zone.js:836) at resolvePromise (zone.js:795) at zone.js:897 at ZoneDelegate.invokeTask (zone.js:431) at Object.onInvokeTask (core.js:26247) at ZoneDelegate.invokeTask (zone.js:430) at Zone.runTask (zone.js:198) at drainMicroTaskQueue (zone.js:611) at ZoneTask.invokeTask (zone.js:517) at ZoneTask.invoke (zone.js:502)

 if (this._isSelectOneElement) {
  this.containerOuter.element.removeEventListener('focus', this._onFocus, {
    passive: true
  });
  this.containerOuter.element.removeEventListener('blur', this._onBlur, {
    passive: true
  });
}

choices.js:3123 Trying to initialise Choices on element already initialised

    if (this.passedElement.element.getAttribute('data-choice') === 'active') {
  if (!this.config.silent) {
    console.warn('Trying to initialise Choices on element already initialised');
  }

  this.initialised = true;
  return;
} // Let's go

[randallknutson]

What you may be able to do is customize the builder and default that option to html5 and then hide the field. Here is some information on how to customize the builder. http://formio.github.io/formio.js/app/examples/custombuilder.html

[dolphinsd]

@randallknutson , we looked into it and cannot find correct json. This works: editForm: { textfield: [ { key: 'api', ignore: true }
] }

But what is the json for default select choices?

[randallknutson]

Try something like:

editForm: {
    select: [
      {
        key: 'api',
        components: [
           {
              key: 'widget',
             defaultValue: 'html5',
              ignore: true,
           }
        ]
      }        
    ]
  }

[dolphinsd]

@rahatarmanahmed , we tried above, has no affect.

Also ignore: true should be before components.

Any documentation on proper formatting?

[dolphinsd]

Still it would be nice to know how to remove choicejs all together.

Looks like its more of angular error, as after using this to load form error went away: this.formBuilder.buildForm(thistemplate); instead of passing it as @Input [form]="template" <form-builder #formBuilder [form]="template" (change)="onChange($event)" [options]="formioOptions" (submit)="formSubmit()">

[jschaab]

Having the same exact issue. It's easy to recreate. If you create a new form with a select that uses data type 'resource' and widget of ChoicesJS, we get the same issue. Using a standard drop down doesn't cause the problem. Also tried with or without 'lazy load' and it still doesn't work.

[randallknutson]

My suggestion is just my attempt to give you an idea of how to get it to work. Something like that should work to disable it but I'm not sure exactly how.

[imshivamchauhan]

any update on this issue? or any workaround?

[jeriah-formio]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!