Choices: Missing hideDropdown(), showDropdown(), toggleDropdown,

[rasben]

Apologises if I'm misunderstanding something here, but I dont seem to be able to use the following functions on my select multiple:

choices.hideDropdown()
choices.showDropdown()
choices.toggleDropdown()

They dont seem to be defined:

console.log(choices)

[jshjohnson]

Hey @rasben,

That is odd. Could you please let me know what version you are using and send me your config.

Thanks

[rasben]

(NPM)
"choices.js": "^2.8.7",

  const select = element.querySelector('select');

  const choices = new Choices(select, {
    removeItemButton: true,
    maxItemCount: 0,
    resetScrollPosition: false,
    noResultsText: '{{ control.multiChoice.noResultsText | translate }}',
    noChoicesText: '{{ control.multiChoice.noChoicesText | translate }}',
    itemSelectText: '{{ control.multiChoice.itemSelectText | translate }}',
    // eslint-disable-next-line arrow-body-style
    addItemText: (value) => {
      return `{{ control.multiChoice.addItemTextPrefix | translate }} <b>"${value}"</b>`;
    },
    // eslint-disable-next-line arrow-body-style
    maxItemText: (maxItemCount) => {
      return `{{ control.multiChoice.maxItemTextPrefix | translate }} ${maxItemCount} {{ control.multiChoice.maxItemTextSuffix | translate }}`;
    },
  });

Just see the {{ 'whatever'|translate }} as strings :)

Thanks for quick answer @jshjohnson

[jshjohnson]

Ah! I know why.

The methods you mentioned are assigned to the Choices class (Choices.prototype) instead of the instance. Methods like destroy, disable, render etc are binded to that particular instance.

Thanks

[jshjohnson]

Thanks for raising this though, really only render needs to be binded to the instance!

[rasben]

Thanks for the super quick answer @jshjohnson , I'll look into the prototype thing :)

Why would i only need to bind render? All the settings im sending along are options to the element..?

[jshjohnson]

Sorry, I worded that badly! You wouldn't need to bind anything. I mean the library should only bind render as it is needed for Redux to do its thing :)

[rasben]

Ahh! Got it :) Thanks!

[jshjohnson]

By the way, you can still call hideDropdown etc like this:

instance.hideDropdown()

You don't need to do:

instance.prototype.hideDropdown

[rasben]

What is instance in this case? Sorry if im being daft @jshjohnson

[jshjohnson]

Not a daft question :)

Your instance is where you initiate Choices like the following:

var instance = new Choices():

instance.hideDropdown();
instance.hightlightAll(); // etc

[rasben]

I feel like we've gone full circle now - the original issue was that i couldnt do just that?

E.g.
const choices = new Choices(select, { BLA BLA });

choices.hideDropdown() did nothing?

[jshjohnson]

Haha. It may have done nothing because the dropdown was already closed?

Just because you can't see a method inside the instance object, doesn't mean it doesn't exist -
JavaScript will traverse up the Choices prototype to find it.

If you look at the source of the demo page, you can see how these methods are being called.

There is also more info here.

[rasben]

...I'm the biggest idiot in the world..

I was binding hideDropdown() to be when you clicked on the choices element.. but of course that is bound to toggle by the core code..

derp.. I fixed it by making a psuedo element

Sorry for the roundabout discussion :)

Btw i'm really impressed with this module - it's so well rounded and awesome!
Here's my final result (with the offending close button :))

Thank you again!

[jshjohnson]

No worries - Looks good man!