[Bug]: Prevent Scrolling

[9mm]

Bug description

I notice you have another commit where you added preventScroll

Here is another place where it keeps scrolling my app. I've tested adding it here and it works correctly:

	/**
	 * Gives the control focus.
	 */
	focus() {
		var self = this;
		if( self.isDisabled || self.isReadOnly) return;

		self.ignoreFocus = true;

		if( self.control_input.offsetWidth ){
			self.control_input.focus({ preventScroll: true });
		}else{
			self.focus_node.focus({ preventScroll: true });
		}

		setTimeout(() => {
			self.ignoreFocus = false;
			self.onFocus();
		}, 0);
	}

Here is my full config:

      picker.value = new TomSelect(select.value, {
        options: data.value,
        items: [modelValue.value],
        create: false,
        highlight: true,
        maxOptions: null,
        maxItems: 1,
        allowEmptyOption: true,
        placeholder: `– ${placeholder.value} –`,
        valueField: valueKey.value,
        labelField: labelKey.value,
        searchField: searchKeys.value,
        dropdownParent: dropdownParent.value,
        onChange: rawValue => {
          let value = rawValue;
          if (castValue.value) {
            value = rawValue === "" ? null : parseInt(rawValue, 10);
          }
          emit("update:modelValue", value);
        },
        render: {
          ...renderOption.value && {
            option: renderOption.value,
          },
        },
      });

Expected behavior

It should not scroll the window the FIRST time clicking into a tom-select which already has a pre-filled in value.

i notice it does not occur if there is not an item already in the box

Steps to reproduce

I dont have a jsfiddle but i can potentially make one later i just wanted to save this here

Additional context

• OS: Latest OSX
• Browser Latest chrome

[ingerable]

I have the same issue. When i am clicking on a pre-filled tom select , my window got scrolled to the far left.

[ingerable]

@9mm

quick dirty fix

 .input-hidden .ts-control > input {
    opacity: 0 !important;
    position: absolute !important;
    left: 0 !important;
}

bc the base style from /node_modules/tom-select/dist/css/tom-select.default.css is:

.input-hidden .ts-control > input {
    opacity: 0;
    position: absolute;
    left: -10000px;
}

[github-actions[bot]]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days