Forms: How to deselect options in dropdown

[Max]

At the moment, when selecting an option from the dropdown in our Forms, you can change it, but it’s impossible to completely deselect it (leave it empty).

The good news is that we have a custom solution! Just add this code to the Custom JS section on the Settings tab of your widget’s settings and you’ll be fine

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');
				});
			}
		});
	}
);

Note: Do not forget to replace Your Widget ID in the 1st line of the code with the ID of your widget

This video shows the feature in action:

Guys, was this solution helpful to you? Share your feedback in the comments