Custom attributes striped from select options

[DieterGribnitz]

I have a select list that requires custom data attributes to be read from the selected option on change.
If an item is selected a function runs using the custom option data.
If I apply the lib to a select list all options are striped out and all data attributes are removed.
Is there a way to keep the data attributes intact on the options?
If not, can you point me to where the option in being constructed?

Thanks.

[tinovyatkin]

@DieterGribnitz there is no way to keep them with the current version of Choices, but you can recreate them by overriding option property on callbackOnTemplateCreate

[DieterGribnitz]

Thanks I will give it a try.

[MatthieuWinalist]

Is there still no easy way to do this ? Thanks.

[cedricdo]

We ran into this issue and got an "easy" fix :

new Choices(select, {
            callbackOnCreateTemplates: function () {
                return {
                    option: ({ label, value, customProperties, active, disabled, }: Item) => {
                        const opt: HTMLOptionElement = Choices.defaults.templates.option.call(
                            this,
                            { label, value, customProperties, active, disabled }
                        );

                        // We get the original <option> from choicejs
                        const originalOption: HTMLOptionElement = this._presetOptions.filter(
                            (option: HTMLOptionElement) => option.value === value
                        )[0];

                        /**
                         * Let's iterate over original <option> data- attribute to reassign them to the <option>
                         * which choicejs generates
                         */
                        for (const [dataProperty, dataValue] of Object.entries(originalOption.dataset)) {
                            opt.dataset[dataProperty] = typeof dataValue === 'string' ? dataValue : undefined;
                        }

                        return opt;
                    }
                }
            }
        } as any);

[DuyTr]

How can I re-write this in JS, not Typescript? Thank you

[tagliala]

I've tried this workaround on version 10.2.0 but I wasn't able to make it work

It looks like that the _presetOptions do not keep the original data attributes (anymore?), and I can't find a way to access them once choices.js is initialized it is working 🤷🏻‍♂️

How can I re-write this in JS, not Typescript? Thank you

  // Needed because by default Choices does not transfer data attributes
  // to the javascript elements Choices-js/Choices#738
  callbackOnCreateTemplates: function () {
    return {
      option: ({ label, value, customProperties, active, disabled }) => {
        const opt = Choices.defaults.templates.option.call(this, { label, value, customProperties, active, disabled })

        const originalOption = this._presetOptions.filter((option) => option.value === value)[0]

        if (originalOption) {
          const dataset = originalOption.dataset || {}

          for (const [dataProperty, dataValue] of Object.entries(dataset)) {
            opt.dataset[dataProperty] = typeof dataValue === 'string' ? dataValue : undefined
          }
        }

        return opt
      }
    }