[Bug]: keyboard input blocked after clicking selected items

[remcokalf]

Bug description

I'm trying to integrate tom-select.js into a WordPress plugin and am running into the following.

I'm initializing it on a select element. After adding items, I found it is possible to click the items, after which isInputHidden becomes true, and the input element hides for some reason. The hiding is via a class .input-hidden. I can easily unhide it by overriding the CSS, but after that, it does not receive keyboard input.

If found the cause here:

tom-select/src/tom-select.ts

Lines 757 to 760 in 4522c18

	// don't enter text in the control_input when active items are selected
	if( self.isInputHidden && !isKeyDown(constants.KEY_SHORTCUT,e) ){
	preventDefault(e);
	}

I'm not sure what the logic is of deactivating keyboard input and hiding the input.

What I'd ideally want is:

• that nothing happens when clicking items, there is no use for it in my case: they are already selected.
• that the input stays visible
• most importantly: that the input is not disabled for keyboard input.

In the docs, I see no way to disable clickability (+ all logic running after that), or any way to keep the input from hiding and being functional.

After some experimenting, I found this works to counteract the logic and fix the keyboard input. Not ideal but at least it works:

onItemSelect: function(e,item) {
    let self = this;
    setTimeout(function() {
        self.clearActiveItems();
        self.focus();
    }, 0);
},

I'm not sure if I am missing something, if this is a bug report, or a feature request.

Expected behavior

Preferably: that there would be an option that makes sure that nothing happens when clicking items:

1. no class,
2. no hidden input
3. no disabling of keyboard input.

3 is the main problem, 1 and 2 can be counteracted with CSS. But a way to prevent the hiding too would also be logical. And just nothing happening would be ideal.

Steps to reproduce

1. add some CSS to make the input visible even if hidden:

.input-hidden .ts-control > input {
    left: 0;
    opacity: 1;
    position: static;
}

4. Click items in the dropdown
5. Click any selected item in the control
6. Try to use the keyboard to input text
7. See that keyboard input is blocked, despite a blinking cursor.

Additional context

• Tom Select v2.4.3

[xJuvi]

Hey,
I don't think this is a bug. However, it would be easier to evaluate if you attached an example (codepen.io or similar).
When you click on an element, the input for new elements is disabled. This is correct and intentional. You can then use the keyboard to move the clicked element to a different position or remove it using the Delete key. If the input field were not disabled, this would not be possible.
As soon as you click in the input field again, you can start typing again. That's how it works in my test. If the behavior is different for you, we need a code example.

Best regards

[remcokalf]

Hi,
Thanks for clarifying this behaviour. I see the same behaviour, so no deed for an codepen example.
I can delete items with the Delete key, but arrow keys do not move them, not sure how that works.

I did not know this; it is not in the docs as far as I can tell.
And (our) users would also have no idea this is the intention behind it. It is not intuitive.

In my application, the order of items is irrelevant, and deleting can be done with the close icons. So the disabling of the keyboard input after a user clicks an item for any reason is unexpected and confusing for them, even more so because there is still a blinking cursor.

So, I guess this is not a bug report but a feature request:
It would be great if there were an option to disable this whole activation of individual items this way (and the subsequent disabling of the input).

[xJuvi]

Hey,
moving/sorting elements is a plugin that must be explicitly activated. Deleting via the icon can also be deactivated, in which case deletion must be performed using the keyboard.

I can well imagine that a function that prevents elements from being clicked would be helpful.

tom-select/src/tom-select.ts

Lines 918 to 932 in 4522c18

	/**
	* Triggered when the user clicks on an item
	* that has been selected.
	*
	*/
	onItemSelect( evt?:MouseEvent, item?:TomItem ):boolean{
	var self = this;
	if( !self.isLocked && self.settings.mode === 'multi' ){
	preventDefault(evt);
	self.setActiveItem(item, evt);
	return true;
	}
	return false;
	}

This piece of code handles the click event. In line 926 we can check the option if clicking checked elementes is allowed.

Also we must exclude this line with an if condition, if item select is disabled:

tom-select/src/tom-select.ts

Line 2674 in 4522c18

setAttr(html,{'data-ts-item':''});

Feel free to create a pull request.

Kind regards
Hannes