silently setting select doesn't pass notification to dropdown

[howudodat]

Describe the bug
There are times you may want to silently set a select or multi-select (ie: setting default parameters) without trigger change handlers. Doing so sets the value in the textbox but does not pass the selection to the dropdown. It also results in the user needing to select the item twice in order to de-select it.

To Reproduce
see code below,

• click on the select dropdown, selected items are not highlighted.
• Click on a selected item (visually nothing happens)
• Click on that same selected item and now it deselects

Expected behavior
The dropdown should also receive notice that the item was selected

Screenshots

Code

MultiSelect<String> select =  MultiSelect.<String>create("Country")
	.appendChild(SelectOption.create("USA", "USA", "America (USA)"))
	.appendChild(SelectOption.create("ARG", "ARG", "Argentina"))
	.appendChild(SelectOption.create("BRA", "BRA", "Brazil"))
	.appendChild(SelectOption.create("DEN", "DEN", "Denmark"))
	.appendChild(SelectOption.create("CRO", "CRO", "Croatia"))
	.appendChild(SelectOption.create("IND", "IND", "India"))
	.appendChild(SelectOption.create("SPA", "SPA", "Spain"))
	.appendChild(SelectOption.create("FRA", "FRA", "France"))
	.appendChild(SelectOption.create("JOR", "JOR", "Jordan"))
	.selectAt(0)
	.addChangeListener(
		(oldValue, newValue) -> {
			Notification.create("Item selected [ " + newValue + " ]")
				.show();
		});

content.appendChild(select);
// select.pauseChangeListeners();
select.selectByValue("BRA", true);
select.selectByValue("IND", true);

[vegegoku]

I could not reproduce this, it worked for both silent and active change handlers.

simplescreenrecorder-2023-10-30_10.56.16.mp4

[howudodat]

This code demos the problem:

package com.howudodat;

import org.dominokit.domino.ui.button.Button;
import org.dominokit.domino.ui.elements.BaseElement;
import org.dominokit.domino.ui.elements.DivElement;
import org.dominokit.domino.ui.forms.suggest.MultiSelect;
import org.dominokit.domino.ui.forms.suggest.SelectOption;
import org.dominokit.domino.ui.layout.AppLayout;
import org.dominokit.domino.ui.notifications.Notification;
import org.dominokit.domino.ui.style.DominoCss;
import org.dominokit.domino.ui.utils.ElementsFactory;
import org.gwtproject.core.client.GWT;
import org.gwtproject.i18n.client.DateTimeFormat;

import com.google.gwt.core.client.EntryPoint;

import elemental2.dom.HTMLDivElement;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class App implements EntryPoint, ElementsFactory, DominoCss {
	protected AppLayout layout = AppLayout.create("Domino-ui test");

	public class PnlSelectTest extends BaseElement<HTMLDivElement, PnlSelectTest> {

		public PnlSelectTest() {
			super(ElementsFactory.elements.div().element());

			DivElement content = div().addCss(dui_flex, dui_flex_col);

			MultiSelect<String> select = MultiSelect.<String>create("Country")
					.appendChild(SelectOption.create("USA", "USA", "America (USA)"))
					.appendChild(SelectOption.create("ARG", "ARG", "Argentina"))
					.appendChild(SelectOption.create("BRA", "BRA", "Brazil"))
					.appendChild(SelectOption.create("DEN", "DEN", "Denmark"))
					.appendChild(SelectOption.create("CRO", "CRO", "Croatia"))
					.appendChild(SelectOption.create("IND", "IND", "India"))
					.appendChild(SelectOption.create("SPA", "SPA", "Spain"))
					.appendChild(SelectOption.create("FRA", "FRA", "France"))
					.appendChild(SelectOption.create("JOR", "JOR", "Jordan"))
					.selectAt(0)
					.addChangeListener(
							(oldValue, newValue) -> {
								Notification.create("Item selected [ " + newValue + " ]")
										.show();
							});

			content.appendChild(select);
			// select.pauseChangeListeners();
			select.selectByValue("BRA", true);
			select.selectByValue("IND", true);

			content.appendChild(Button.create("test select").addClickListener(l -> {
				GWT.log(select.getValue().toString());
			}));

			this.appendChild(div()
					.addCss(dui_flex, dui_flex_col)
					.appendChild(content));
		}
	}

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		layout.withContent((parent1, content) -> {
			content.appendChild(new PnlSelectTest());
		});

		body().appendChild(layout);
	}

	public static native void time(String timer)
	/*-{
		console.time(timer);
	}-*/;

	public static native void timeEnd(String timer)
	/*-{
		console.timeEnd(timer);
	}-*/;

	public static native void timeLog(String timer, String log)
	/*-{
		console.timeLog(timer, log);
	}-*/;

	public static DateTimeFormat sdfLong = DateTimeFormat.getFormat("MM/dd/yyyy HH:mm:ss.SSS");

	public class Date extends java.util.Date {

		public Date() {
			super();
		}

		public String toString() {
			return sdfLong.format(this);
		}
	}
}

you can also find a fully functional demo at my test repo: https://github.com/howudodat/domtest NB: switch to select_test branch

[howudodat]

Here's a video to go with the code. You'll notice that the value shows USA, Brazil and India selected. But the dropdown does not. Also in order to de-select Brazil, I had to do it twice. sorry the pointer is not visible. I'll go find another screen recorder tool that shows the pointer and update the video

Screencast.mp4