Select drop-down list and then deselect

[Sina]

Hi,
Have I encountered a issue or is this normal?
If I’ve selected something in the dropdown field (4 options: 1,2,3,4) and then reconsider and want to deselect it, it’s not possible.
In the initial state, the placeholder is displayed.
I would have to insert an option of 0 or empty.

[Max]

Hi there, @Sina

Yes, this is a normal behavior. Do I get it right that you’d like to let users leave the dropdown empty if they’ve mistakenly chosen the wrong value?

[Sina]

Yes, exactly, @Max, that’s how it works. If you make a mistake, you can undo it without having to make an alternative selection.

[Max]

Here is a custom solution to achieve this (the code should be added to the Custom JS field)

const WIDGET_ID = 'Your Widget ID';

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		let i = 0;

		const check = () => {
			const component = root.querySelector(selector);

			if (component) {
				res(component);
			} else if (i !== 50) {
				setTimeout(check, 100);
				i++;
			}
		};

		check();
	});

waitForElement(`.elfsight-app-${WIDGET_ID} > div`).then(
	(container) => {
		container.addEventListener('click', () => {
			const options = container.querySelectorAll('option');

			if (options.length) {
				Array.from(options).forEach((option) => {
					option.removeAttribute('disabled');
				});
			}
		});
	}
);

In the 1st line of the code, you should replace Your Widget ID with the ID of your widget. Try it out and let me know if it worked

I also agree that it would be great to have this option built-in, and I’ve added this idea to the Wishlist on your behalf - Deselect options in dropdown

[Sina]

works perfectly