Cancel or change a <select> value change event

[DOCaCola]

What is the intended way to change a select value change event? I have set up test code with several options and a event handler registered like this:

void ColorSelectListener::ProcessEvent(Rml::Event& event)
{
	if (!mEnabled)
		return;

	auto* elementSelect = dynamic_cast<Rml::ElementFormControlSelect*>(event.GetCurrentElement());

	mEnabled = false;
	elementSelect->SetValue("blue");
	mEnabled = true;
}

But i can still select any option in the drop down and it does not get set to the "blue" value. At least visually the select still allows selecting any of the other drop down options.

[mikke89]

Hello. Hm, yeah, changing value from the change event is not something I have really considered before. It sounds like one of those things where it is easy to end up in an infinite loop. But, I guess it should work, do you know whether this works in web browsers?

Looking at the code, I see that we are locking the selection while changing the value. So it is possible that the value attribute changes but not the selected index.

By the way, you can also just set the value attribute without the dynamic_cast, it should have the same effect. But it's not wrong either way.

[DOCaCola]

Thanks for your insight into this. At least querying GetValue right after doing SetValue returns the correct value while still in the ProcessEvent function. So i think your assessment is correct.
In HTML it works by doing it like shown below. There is no built-in way to "cancel" a change either, but the value can be restored with a previously stored value (or be set to something completely else).
Also on a side note here: In HTML/Javascript the onchange event doesn't actually get triggered in general when setting the value with select.value = "c";. So the problem of recursiveness with the event listener doesn't arise there.

<select id="mySelect">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

<script>
  const select = document.getElementById("mySelect");
  let prevValue = select.value;

  select.addEventListener("change", function (event) {
    if (!confirm("Do you really want to change?")) {
      select.value = prevValue;
      return;
    }
    prevValue = select.value;
  });
</script>

[DOCaCola]

So, if you want to update the selection box to a different option during the change event in RmlUi, then probably would result in something this:

// Always reset to "blue"
void ColorSelectListener::ProcessEvent(Rml::Event& event)
{
	if (!mEnabled)
		return;

	auto* elementSelect = dynamic_cast<Rml::ElementFormControlSelect*>(event.GetCurrentElement());

	mEnabled = false;

	int optionsCount = elementSelect->GetNumOptions();
	for (int optionIndex = 0; optionIndex < optionsCount; ++optionIndex)
	{
		Rml::String curValue = elementSelect->GetOption(optionIndex)->GetAttribute("value")->Get(Rml::String());
		if (curValue == "blue")
		{
			elementSelect->SetSelection(optionIndex);
			break;
		}
	}
	mEnabled = true;
}