Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Prevent Scrolling #729

Open
9mm opened this issue Jun 15, 2024 · 2 comments
Open

[Bug]: Prevent Scrolling #729

9mm opened this issue Jun 15, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@9mm
Copy link

9mm commented Jun 15, 2024

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
@9mm 9mm added the bug Something isn't working label Jun 15, 2024
@ingerable
Copy link

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

@ingerable
Copy link

@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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants