Retain placeholder text after selection


#1

This does pertain to select2, need the background though.

I am sure you have seen behavior where input form elements use the labels with some scripting to place label text inside the form elements as the hint text for what should go in the form element. Then when the user clicks on the element, the hint text disappears but will reappear if the user does not enter any text.

This is the first time we are using select2 to put a select box in among input form elements where the hint text is used for the input boxes. Previously it was used for a series of select boxes that help select a product, but the function of removing placeholder was not an issue.

From a style perspective, I have been able to match the styling between the input and select form elements (including retaining an asterisk for those that are required as part of the hint text), but am not able to replicate the hint text behavior because as soon as the user makes a selection from the select2 box, the placeholder text disappears, never to return again.

Is there a way to stop that?


#2

The placeholder is only displayed when there is no selection. If you want to make the placeholder reappear you must delete the current selection. One way to do this with the “allowClear” configuration option. You can also do it programmatically (for example, in response to the user making a selection).