orchidjs / tom-select

Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
https://tom-select.js.org
Apache License 2.0
1.66k stars 124 forks source link

[Bug]: Prevent Scrolling #729

Open 9mm opened 5 months ago

9mm commented 5 months ago

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

ingerable commented 3 months ago

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

ingerable commented 3 months ago

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