Translate the Select Value text

[Andi]

If I chose a dropdown field and if I do not set a default value, ‘Select Value’ appears. It would be nice to have the separate settings for translation this text.

[Max]

Hi there, @Andi

Thanks for the idea! If it gets more votes, we’ll try to think about this option

[Max]

As for now, you can use this script in the Custom JS field on the Settings tab of your widget’s settings:

const CUSTOM_SELECT_VALUE = 'Select Value';
const WIDGET_CLASS = 'elfsight-app-500a35e2-053a-436f-800b-ade1e5be0f26';

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node,
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0,
  },
};
function listenStep(args) {
  args.node = args.select(args.selector, args.root);
  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else args.reject();
  } else {
    args.resolve(args.node);
  }
}

async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    ...customArgs,
  };
  if (type === 'one' || type === 'all') {
    return new Promise((resolve, reject) => {
      listenStep({ ...args, resolve, reject });
    });
  }
}

const createInput = (placeholder) => {
  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = placeholder;

  input.style.cssText = `
    width: calc(98% - 24px) !important;
    box-sizing: border-box !important;
    padding: 10px 29px 10px 15px !important;
    margin: 0px 12px !important;
    border: 1px solid rgba(17, 17, 17, 0.6) !important;
    border-radius: 4px !important;
    position: fixed  !important;
    top: 10px !important;
    left: 0 !important;
    background: inherit !important;
    z-index: 2 !important;
	`;

  return input;
};

asyncListenFor(`.${WIDGET_CLASS} [class*="form__Container-sc"]`).then(
  (formContainer) => {
    const dropdowns = formContainer.querySelectorAll(
      '[class*="dropdown__Container-sc"]'
    );

    for (const dropdown of dropdowns) {
      const select = dropdown.querySelector("[class*='dropdown__Select-sc']");
      select.textContent = CUSTOM_SELECT_VALUE;

      const mutationObserver = new MutationObserver(([{ addedNodes }]) => {
        if (addedNodes.length) {
          const container = addedNodes[0];
          const dropdownContainer = container.querySelector(
            '[class*="Dropdown__DropdownContainer-sc"]'
          );

          const firstValue = dropdownContainer.querySelector(
            "[class*='DropdownItem__ItemContainer-sc']:first-child [class*='DropdownItem__Item-sc']"
          );
          firstValue.textContent = CUSTOM_SELECT_VALUE;

          const withFilters = dropdownContainer.childNodes.length > 12;

          if (withFilters) {
            const filter = createInput('Search...');
            dropdownContainer.prepend(filter);

            dropdownContainer.style.position = 'relative';
            dropdownContainer.style.paddingTop = '60px';

            filter.addEventListener('input', (e) => {
              const value = e.target.value.trim();

              if (value) {
                dropdownContainer.childNodes.forEach((node) => {
                  if (node.nodeName === 'INPUT') {
                    return;
                  }

                  const isTarget = node.textContent
                    .toLowerCase()
                    .includes(value.toLowerCase());

                  if (isTarget) {
                    node.style.display = 'flex';
                  } else {
                    node.style.display = 'none';
                  }
                });
              } else {
                dropdownContainer.childNodes.forEach((node) => {
                  if (node.nodeName === 'INPUT') {
                    return;
                  }

                  return (node.style.display = 'flex');
                });
              }
            });
          }
        }
      });

      mutationObserver.observe(dropdown, { childList: true });
    }
  }
);

Replace Select Value in the 1st line of the code with the needed text and you’ll be fine

[Max]

Great news! We’ve started working on this request and the feature is already in the development.

We’ll keep you posted on any progress here

[Max]

Hey everyone!

Great news - we’ve added a Placeholder setting for the Dropdown field, which lets you manually change/translate the default “Select Value” placeholder