Choices: Dynamic placeholders for Multi-select no longer working in 9.x

[travist]

Describe the bug
In all versions <= 8.0.0, placeholders would show up for multiple select dropdown configurations. This is no longer working in the 9.x branch.

To Reproduce
Steps to reproduce the behavior:

1. Add a new multi-select with no initial options.
2. Use the following code to add placeholder.

<select id="myselect"></select>

new Choices(document.getElementById('myselect'), {
  placeholderValue: 'This should be a placeholder'
});

Expected behavior
You should see the placeholder.

Screenshots
Will provide if necessary but this is pretty easy to reproduce.

Desktop (please complete the following information):

• MacOS, Chrome

[alfonsoar]

I am also hitting this bug

[jshjohnson]

Hey - so I actually removed this functionality in the 9.0.0 release (https://github.com/jshjohnson/Choices/pull/731) but have clearly forgotten to update the documentation 🤦‍♂For versions >=9.x, placeholderValue will only apply to text elements. The reason for removing it was the added complexity of supporting it.

[travist]

This can be done by just adding a "placeholder" attribute on the input element that is part of the multi-select. This would normally be done via configurations, but the issue the current branch has it is does not default to the placeholder configurations if the select element does not have a "default" select option. The following pull request fixes this issue with minimal changes.

https://github.com/jshjohnson/Choices/pull/788

[evenfrost]

@jshjohnson then what is the current way to add a placeholder to multiselect? searchPlaceholderValue does not work either.

[travist]

Unfortunately, we just had to duck punch it.

https://github.com/formio/formio.js/blob/7106f7e7a365f0fede26e42e6f4802ef7e7b97ac/src/utils/ChoicesWrapper.js#L12

[evenfrost]

@travist thanks. I've ended with dumb'n'brute solution (using Preact):

  useEffect(() => {
    const choices = new Choices(selectRef.current, options as IChoices.Options);

    if (restProps.multiple && choices.config.placeholderValue) {
      ((choices as any).input as HTMLInputElement).placeholder = choices.config.placeholderValue;
    }
  }, []);