orchidjs / tom-select Goto Github PK

Is your feature request related to a problem? Please describe.
Looking for obvious way to clear all items of the select whilst hovering or select box is open.

Describe the solution you'd like

Add 'times' icon to bottom right, or right of the select box to allow user to clear all selections. Should be able to be done on hover and whilst the select is open

Describe alternatives you've considered

• optional flag to show this, maybe "showClear"
• should show on hover, and whilst its open

Is your feature request related to a problem? Please describe.
My use case is that I have a tag system where users are able to select any combination of tags that they want (including none). When there's a tag selected and you delete the tag from the field, the user is unable to submit the form because tom-select's internal inputs have the required input set. Judging from the code, this is intentional, but it breaks this use case and I was wondering whether this could be an additional option?

Describe the solution you'd like
A toggleable option to remove the required attributes on the inputs.

Describe alternatives you've considered
tom-select reapplies the required attribute pretty aggressively, so I can't programmatically remove it via hooking into its events, either.

Describe the bug
In a long dropdown, the currently selected item is scrolled-to when opening the dropdown. This is wanted behaviour, but if the dropdown was previously scrolled there's an animation from the old position to the selected item position.

To Reproduce
Steps to reproduce the behavior:

1. Make a large list (~200)
2. Select an element at the top
3. Reopen the list
4. Scroll to the bottom
5. Close the list (without picking anything)
6. Reopen the list and observe the dizzzying zoom-scroll from the bottom all the way to the top

Expected behavior
Open opening at step 6 the dropdown should be centred about the selected item already without any motion.

Additional context
Version: 1.7.1

Describe the bug
Dropdown closes if option_create and no_results template are hidden

To Reproduce
Steps to reproduce the behavior:

1. https://jsfiddle.net/pgb73cmz/
2. type '123..'

Expected behavior
A clear and concise description of what you expected to happen.

Describe the bug
I have API endpoint that is doing remote full text search on query, and the results are getting filtered unless I specify all the search fields that should be found in the columns.

Is there a way to disable this feature? I have tried setting searchField: [] and null but not working. Basically just want to show all the results from API, without filtering.

https://tom-select.js.org/examples/remote/

https://codepen.io/ivanboichuck/pen/gOLQYpx

Description

With a tom-select on a text input, with maxItems 1, create/createOnBlur, and loaded options, if you try to select one of the options, it does a createOnBlur instead.

To reproduce

<input id="textInput" type="text">

new TomSelect(input_el, {
      create: true,
      createOnBlur: true,
      maxItems: 1,
      load: function(query, callback) {
        callback([
          {value: "1", text: "value1"},
          {value: "2", text: "value2" }
        ]);
      }
    });

1. Go to https://jsfiddle.net/vs9bmkxa/

2. Click in the text box.

3. Type "v" to get the value list to show up.

4. Select either of the options that show up, value1 or value2. Select by arrow keys and return OR by mouse clicking.

5. See that nothing changes in the box, it still says v instead of value1 or value2. If you open the drop-down again, you'll see that v now appears as an option -- the "create" option has been triggered, even though I didn't choose the "add" option, and DID mean to choose one of the other options.

Expected behavior

After entering "v" and selecting one of the options, I expect:

• that option to be displayed in the visible box
• "v" NOT to have been added to the option list with "create"

Additional context
MacOS Chrome

This might just be user-error, in which case an update to the docs might help, otherwise it might be a feature request.

When I use a select like this:

	new tomSelect(selectElem, {
		plugins: ['remove_button'],
		create: false
	});

I can start typing a few chars, then use the keyboard (up/down/enter) to select a item from the list.

When I do that, the characters i typed remain in the box. Can these be removed on selection?

Thanks

This might be user error on my part, if so I'd be really grateful to know what I'm doing wrong.

When I do this import TomSelect from 'tom-select';

I get

ReferenceError: navigator is not defined
    at \myproject\node_modules\tom-select\dist\js\tom-select.complete.js:728:28

Ignoring the precise error for a moment, this shows that the esm packages havent been loaded, but instead its used the commonjs ones.

This article seems to explain the situation well, but I dont know enough about npm or this project to recommend a course of action: https://2ality.com/2019/10/hybrid-npm-packages.html

Then, on to the error.

This is the offending line:

const IS_MAC = /Mac/.test(navigator.userAgent);

Can we modify the codebase so its not talking to the global navigator? Or otherwise, what is my solution to import tomselect in a bundling scenario and not encounter this error?

Describe the bug
I've created a tom-select with create: true, duplicates: true. When removing a duplicate value from this tom-select (by pressing backspace), the deleted element isn't always at the caret position and sometimes deletes multiple copies of the duplicated value (while throwing an error, below).

To Reproduce
Steps to reproduce the behavior:

1. Create a tom-select input with duplicates and create enabled
2. Enter some values including at least some duplicates
3. Delete values using backspace. When removing a value that has multiple copies, the bug will occur.

Expected behavior
The element(s) should be deleted.

Additional context
Error message as follows (using latest dist):

Uncaught TypeError: t.options[s] is undefined
    updateOriginalInput tom-select.ts:2077
    removeItem tom-select.ts:1887
    removeOption tom-select.ts:1646
    removeItem tom-select.ts:1880
    deleteSelection tom-select.ts:2266
    onKeyDown tom-select.ts:691
    setup tom-select.ts:324
    C utils.ts:128
    setup tom-select.ts:324
    R tom-select.ts:157
    <anonymous> initialize.js:5
    jQuery 8
    onopen shinyapp.js:94
    createSocket shinyapp.js:91
    connect shinyapp.js:36
    initShiny init_shiny.js:551
    setTimeout handler* init_shiny.js:583
    jQuery 13
tom-select.ts:2077:4

see brianreavis/sifter.js#62

https://github.com/bitovi/syn

Describe the bug
When I disable a tom-select element, I expect it would be grayed-out. See the example in the Bootstrap-documentation: https://getbootstrap.com/docs/5.0/forms/select/#disabled.

To Reproduce
Steps to reproduce the behavior:

1. Create a disabled tom-select (either by using the disabled-attribute or disable() in the Javascript API)
2. The select is not grayed out.

Expected behavior
I would expect that it looks grayed out.

Additional context
Add any other context about the problem here.

• OS: Windows 10.0.19043.985
• Browser: Chrome
• Version: 90.0.4430.212
• Device: Desktop
• Bootstrap: 5.0.1
• Tom-select: 1.7.0

Hi, Thank you for the great library.

Is it possible to open simple select without autocomplete input?

On mobile, focus will open keyboard and reduce the view you have.

Describe the bug
Placeholder text is visible when dropdown has a selected value prior to plugin initialization.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://tom-select.js.org/examples/
2. Scroll down to <select> <option disabled>
3. Notice that next to Nikola Tesla there is also Select a person... placeholder text visible.

Expected behavior
Dropdown has a selected value, therefore placeholder text should not be visible.

Continuing on the steps above, if you open the dropdown and click on Nikola Tesla option (so, just selecting again the option that is already selected), then the placeholder text goes away. The two states (on page load and after clicking the option) are the same, so the representation should also be the same, i.e. without the placeholder.

Perhaps this is not so straight forward for multi-select case, not sure what is the desired behavior there. But for single-select case, it is clear - selected value == hidden placeholder.

Additional context
Add any other context about the problem here.

• OS: Mac 11.2
• Browser Chrome
• Version 88.0.4324.192 (Official Build) (x86_64)
• Device: Macbook pro

Hi again,

if using JS API, clearOptions() doesn't work as intended ( i think ). First time it works, but then everytime you change the first select, previous value stays with the options as well.

(just change 1st select multiple times and check options in 2nd select everytime )

https://jsfiddle.net/mArtinko5MB/ovub8m6e/7/

Describe the bug
On a multi-input with hidePlaceholder: true, placeholders are correctly hidden when there is one option selected and the select input is not focused, but when focused, the placeholder shows again. It seems to me like they should remain hidden whether or not the element has focus.

To Reproduce
Steps to reproduce the behavior:

1. Create a tom-select with hidePlaceholder: true
2. Select a value - notice that the placeholder remains
3. Click somewhere else on the page and watch the placeholder disappear

Expected behavior
The placeholder should be removed whether or not the element has focus (as long as there is >= 1 option selected)

Additional context
Latest Firefox and tom-select dist.

Describe the bug
1.7.3 and 1.7.4 at least are having issues with allowEmptyOption. Empty option is unable to be selected.

Example
https://jsfiddle.net/ocqzp0ht/

To Reproduce
Steps to reproduce the behavior.

set any select with allowEmptyOption

Expected behavior

Should be able to select empty option

• when ctrl or shift key is down
• when input is hidden

Is support for Bootstrap 5 on the books very soon, despite it being in Beta at the moment its not going to be long before full release.

As well default docs are set as Bootstrap 5 beta people will start using that automatically.

Describe the bug
Typescript is unable to recognize typings in present in the package.

To Reproduce
in app.ts
import TomSelect from 'tom-select

Expected behavior
It should be able to resolve type completions.

Placeholder does not work with dropdown_input and remove_button plugins

My code:
document.querySelectorAll('.filter__select').forEach(element => {
new TomSelect(element, {
plugins: ['remove_button','dropdown_input'],
sortField: 'text',
});
});

When using tom-select 1.7 and bootstrap 5 styles, input-group doesn't group the select ( tom-select has radius on both sides )

difference between working and not working down bellow

https://jsfiddle.net/mArtinko5MB/5jo2xc8u/14/

When using remote loading results search doesn't search again when backspacing the input value.

e.g.
type anything - search is performed
backspace the word to have anythin written - search is not performed

I think this is due to the following line here in the method

At every pressed character the current value gets flagged as key in the loadedSearches map.
So while typing the word anything all the values to get to whole word get added there (a, an, any, anyt, and so on).

By flagging all the partial searches as loaded their potential results become inaccessible.
In fact, the loadThrottle setting might have prevented those searches from being performed and at that point the select increasingly collects and shows wrong results (no results) for those searched that were canceled by the loadThrottle property.

I have some problems when trying to remove items after upgrading to v1.4.2 or v1.4.3.
Unfortunately I was not able to reproduce it in a jsfiddle environment. I believe it is related to the reactive framework I'm using.
So I will try to explain what I noticed and maybe someone will understand what is happening.

This is how the framework I am using is getting the selected values from the select element.

    getSelectValues(el) {
        return Array.from(el.options)
            .filter(option => option.selected)
            .map(option => {
                return option.value || option.text
            })
    },

And that is not working anymore with tom-select v1.4.2 after removing an item because the options from el.options are still selected. And yet el.querySelectorAll('option[selected]') returns the correct selection.

Does that make any sense for someone ?

The tomselect bootstrap scss defines styles for .is-invalid but the class applied to the invalid element is .invalid

Consequently an invalid TS has a .invalid class on it, but no styling

This example https://tom-select.js.org/examples/required/ shows the styling not applying either

Am I doing something wrong?

Thanks for the support and otherwise fantastic component!

Describe the bug
If an option is already selected in the control, when a new entry is typed, it is typed ahead of the already selected option.

To Reproduce
Steps to reproduce the behavior:
If an option is already selected in the select box, when we focus on the box and start typing the

1. Go to https://codepen.io/anandphulwani/pen/JjRwpjM
2. Select "Select a person" box and select any value.
3. Move your focus to 1st component.
4. Click on tab, now focus is back on the select box, start typing any text to filter results in the dropdown.
5. The older value is shown and the new value is typed ahead of the older value.

Expected behavior
If an option is already selected in the control, as soon as the control receives focus, the text should be selected, and as soon as new key is pressed (except tab, shift+tab) the selected text should be cleared and new value should be typed.
If a valid value is typed or selected, and focus is moved out the control that value should persist, if an invalid value is typed or half typed, and focus is moved out, the value should revert to older value.

Additional context
Add any other context about the problem here.

• Windows 10
• Firefox Developer Edition
• 85.0b7
• PC

Also, clear button doesn't clear e.target.value to null, it stays the same. It only clears div shown, which is unusable because if i want to deselect the value of form it stays the same after submit, basically i am unable to deselect.

Originally posted by @martinbarilik in #92 (comment)

When I load a page with preselected value the tomselect seems to show the input field which instead should be hidden.
I initialize the objects - when dom is loaded - with no options:

new TomSelect(input, {}); 

In the screenshot I have a select with value in it (input that should start as hidden is shown) and another select with no default value selected.

I notice that hideInput() is called in order to set those properties. Maybe, should it be called when initializing the tomselect?

There is a overlap of clear button when doing mouse-over.

https://jsfiddle.net/mArtinko5MB/cx8203az/17/
Also can we make the clear button always visible? It won't hurt to know ( without doing mouse-over ) that the select is deselectable.

When using autocomplete on <input>, after selecting a value that value gets "locked" and is no longer editable.

See: selectize/selectize.js#256

The use case is for me that I want to choose from a set of given texts (these are from an OCR-engine and may be faulty), and then correct some letters or add something to the text.

Describe the bug
tom-select.complete.min.js doesn't work, it gives ReferenceError: tomSelect is not defined, where as tom-select.complete.js works completely.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anandphulwani/pen/LYRMeLy, open Console to check error.
2. Click on "Gear" icon in the JS section, top open "Open JS Settings".
3. Scroll down to 4th library it has min.js file loaded
   https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js
   when you change to .js file, it works
   https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.js

Expected behavior
tom-select.complete.min.js should work.

Additional context
Add any other context about the problem here.

• Windows 10
• Firefox Developer Edition
• 85.0b7
• PC

Describe the bug

To Reproduce
Steps to reproduce the behavior:

• upgraded to 1.4.1

I would like to prevent searches from being carried out when the string length is lower than a certain value (e.g. 3 chars min).
I can tweak the load function and exit it if the requirement isn't met but then the "no results message" returned by calling the callback without items wouldn't convey the right message.

Maybe the createFilter option could be used before load is called or there should be a way to change the message returned if the callback has been called due to the query being too short (or any other reason for that matter, e.g. the search returned an error).

Describe the bug

To Reproduce
Steps to reproduce the behavior:

• in single select mode, (assume same for multi-select)
• change selections
• each selection keeps "selected" class

Expected behavior
Selected class should only be assigned for selected options, and all others removed. There is an 'active' class that appears after you select but this class doesn't initialise with initial selection, so makes styling on selected item hard.

Describe the bug

Firefox shows the following message in the console:

This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0".

To Reproduce
Steps to reproduce the behavior:

1. Go to https://tom-select.js.org/
2. Open firefox console
3. See warning

Expected behavior
No warning

Thank you very much for this great script.

Describe the bug
My option renderer uses a field in the data to customize the option's look. Calling updateOption(value, data); doesn't cause a re-render. I have a click handler to toggle a "is favorite" star on options.

Expected behavior
Ideally I could mutate the data associated with a value and then force a re-render. Calling removeOption() / addOption of the same data, or clearCache() or refreshOptions() all fail to notice the change in data and call the render.option() function.

Describe the bug

I'm trying to use remove plugin in a web application.

I tried two ways:

import TomSelect from "tom-select/dist/js/tom-select.base";
import "tom-select/dist/esm/plugins/remove_button/plugin";

import TomSelect from "tom-select/dist/js/tom-select.base";
import "tom-select/dist/js/plugins/remove_button";

The first one fails at compile, with error:

"./node_modules/tom-select/dist/js/plugins/remove_button.js" contains a reference to the file "../../tom-select.ts".
This file can not be found, please check it for typos or update it if the file got moved.

The second one compiles, but then fails on browser with console error:

Uncaught Error: Unable to find "remove_button" plugin

Additional context

• OS: Debian
• Browser: Firefox
• Version: 86
• Device: laptop

Describe the bug
setting optgroup_header template to null results in error

To Reproduce
Steps to reproduce the behavior:

render:{
  optgroup_header: null
}

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo in the documentation)
• Indicate precise steps to reproduce in numbers and the result,
  like below

Questionable behavior when the user clicks on an optgroup header

Steps to reproduce:

1. Initialize tom-select with option groups and options for them
2. Click the input to open dropdown
3. Click on an optgroup header

Expected result: Dropdown remains as is OR All items in the clicked group are selected.

Actual result: Dropdown is closed

That the dropdown is simply closed, is bad usability IMO.

optgroup demos:
https://tom-select.js.org/examples/optgroups/

There is an existing bug report about this in selectize repo:
selectize/selectize.js#1382
And PR that supposedly fixes the issue:
selectize/selectize.js#762

I've also included a feature suggestion as second item in the "Expected result" -field above; Clicking the optgroup header could select all items in the optgroup. Perhaps this could be implemented in a plugin?

Describe the bug
Looking at the way we are binding to the input event of the control, we are getting this triggered on every option that gets removed after clicking the clear-button.

This causes multiple ajax calls to refresh our data grid, when we would only expect once after clearing input.

To Reproduce

• have multiple options
• press clear button
• bind to input event and will trigger once for each option selected

Expected behavior

• should only trigger once after clearing all items

Describe the bug
When setting a CSP-policy, unsafe-inline must be set on style-src (there a two inline style attributes on a div with class ts-dropdown single and a div with class ts-dropdown-content) and data: must be allowed on img-src (for the dropdown icon). Probably there are some more situations like this.

To Reproduce
Steps to reproduce the behavior:

1. Set a CSP-policy on a page with tom-select selectors, such as: content-security-policy: default-src 'self'.
2. The selectors don't work, have a look at the console in DevTools to see the blocked resources.

Expected behavior
I would expect this plugin to work with a secure CSP.

Additional context
Add any other context about the problem here.

• OS: Windows 10, 20H2
• Browser: Chrome
• Version: 89.0.4389.90
• Device: Desktop

Is your feature request related to a problem? Please describe.

max displayed tags using the width of the input. Really nice to have when using a small input, for things like search filtering etc.

Describe the solution you'd like

• ability to just show options that dont fit as comma separated, with "...." and displayed number.
• checkboxes selections for each option

Describe alternatives you've considered
similar to this example
https://rsuitejs.com/components/check-picker/

The phantomjs is not a maintained project and doesn't support modern js

Describe the bug
Firefox appears to fail to get updated form values from the selected search result.

To Reproduce

1. Create an HTML form.
2. Use tom-select in a element with multiple entries. Load your test page and search using tom-select and click a result. Submit the form. The form value for that select field will likely be empty. Video of the problem is attached Expected behavior The form value should be returned (as it seems to be, reliably, in Chrome). Additional context Tested on Windows Firefox 86.0b8 and 86.0. The problem also affects other firefox based browsers such as Pale Moon. https://user-images.githubusercontent.com/761083/112556443-25116180-8dc2-11eb-8086-2a1918c80583.mp4

Describe the bug
Dropdown doesn't scroll to active option. See compiler-explorer/compiler-explorer#2666

Not precious about the event names.

I need to know when the dropdown is (not)visible below the input.

I have the select in a modal and so need to prevent esc and clicking the modal overlay from hiding the modal when the tomSelect is "open"

Note that focus and blur aren't enough because the control can have focus but not be open (e.g. focus it, see the options, press esc, the options close, control is still focused)

It would be nice to subscribe to the proposed events so i can disable/enable modal hiding whilst the options are open, as clicking away/escaping is because the user wants to close the tomSelect, not the modal its in

Describe the bug
Inner input is visible for narrow selects, even with a default value.

To Reproduce
Steps to reproduce the behavior:

1. Create a select with a width a bit bigger than the contents

Here is a JSFiddle showing the issue:
https://jsfiddle.net/3yjzwhaq/

Expected behavior
Input should be hidden if a value is set.
It looks like when manually selecting a value the input is given the following styles:

style="opacity: 0; position: absolute; left: -10000px;"

Additional context
Add any other context about the problem here.

• OS: [Ubuntu 20.04]
• Browser [Firefox]
• Version [88.0.1]
• Device: [Desktop]

Tested with same result on Chromium 90.0.4430.212

Manually setting the style is a good workaround:

document.querySelector('#my-select-tomselected').style = "opacity: 0; position: absolute; left: -10000px"