Is it possible to force redraw the custom element?

[Miodec]

I've got an issue where I need to update the value a select without having access to the SlimSelect class. I have tried setting this manually like this:

      const select = document.querySelector(
        `.pageSettings .section[data-config-name='${this.configName}'] select`
      ) as HTMLSelectElement;
      select.value = this.configValue as string;

but this doesn't redraw slim select. This means that my "real" select and the "custom" one are out of sync. I tried dispatching a change event, but that creates other issues in my app (infinite loops and such).

Is there a way to redraw the dropdown by firing an event or something?

Im coming form select2, and it had an option to fire an event change.select2 which would only update the custom element. https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

[brianvoe]

slim is also attached to the select so you can get it from there https://slimselectjs.com/settings#select

[Miodec]

Ah, nice. What about redrawing without triggering a change event? I came up with this but is there a cleaner way?

function rerenderSlimSelect(ss: SlimSelect | undefined, value: string): void {
  ss?.store.setSelectedBy("value", [value]);
  ss?.render.renderValues();
  ss?.render.renderOptions(ss.store.getData());
}

[brianvoe]

do an if statement check at the beginning of your function to check for ss return if not found.

just run https://slimselectjs.com/methods#setSelected. you shouldnt need to rerender anything it will do it for you

[Miodec]

I tried setSelected and that is definitely causing the change event to fire. (which in my case is problematic)

[brianvoe]

sorry not much i can do about that