Additional methods for advanced select

Summary

Additional advanced select methods to support frameworks

Detailed Description

I've run into a couple of issues when I wanted to create an Angular component based on the advanced select. As I was searching for a solution I've read multiple issues in this repository and studied the source of the advanced select. I realized, that right now there are about 20 issues that somehow involves the advanced select and different framework issues, mostly about:

conditional rendering
manipulating the select

The maintainers reasoning is perfectly understandable: It would be impossible to provide support for all frameworks. There was an update for the advanced select's documentation as well. However a gap remains between the creators and users (or customers for preline pro).

I suggest making it perfectly clear in the documentation, that:

The original select's DOM structure is invisible
There is an init method (which IS written in documentation) that triggers the build of the preline's advanced select
There are NO event handling or data binding between the original DOM structure (the hidden select) and the displayed structure (preline divs) The documentation warning would help preline users, as they should not manipulate the the original structure and expect changes to the advanced select.

My second advice is the request itself: there should be methods to manipulate the state and value for the advanced select. I understand, that preline plugins use vanilla JS, but this approach with the static init script makes it extremely hard to create a custom component in any framework. There are numerous issues about conditional rendering and people are trying to guess when to call

window.HSStaticMethods.autoInit(['select']);

in their components. After a couple of days I still have to find out how to fix every state change in my component. It would help a lot for anyone using any framework, if there would be a method to change the selected value for example. Right now, if you want to change it, the only way to keep the advanced select's inner state consistent is to find the div with the value, and "click" on it:

    const optionElement = document.querySelector(
      `div[data-value="${this.selectedItem.val}"]`
    ) as HTMLDivElement;
    if (optionElement) {
      optionElement.click();
    }

But this way I still cannot reset the state to "Select option..." because there is no way to do so, even for the enduser. It would be highly beneficial if there were such setter methods, so:

any framework user could manipulate the advanced select's state the way they want
there would be no framework dependency in preline, and there would be less open issue that share the same root cause.

Use Cases

Custom framework components, like an entity editor.

There is a form that opens as an entity editor. There is no easy way to set the selected value for the advanced select, so it could represent the entity's current property value.

htmlstreamofficial / preline