feat: select all options from optgroup | accessibility improvements

src/defaults.ts

@@ -29,6 +29,8 @@ export default {
 	loadThrottle: 300,
 	loadingClass: 'loading',
 
+	allowOptgroupSelection: false,
+
 	dataAttr: null, //'data-data',
 	optgroupField: 'optgroup',
 	valueField: 'value',

src/plugins/drag_drop/plugin.ts

@@ -15,8 +15,9 @@
 
 import type TomSelect from '../../tom-select.ts';
 import { TomOption, TomItem } from '../../types/index.ts';
-import { escape_html, preventDefault, addEvent } from '../../utils.ts';
+import { escape_html, preventDefault } from '../../utils.ts';
 import { getDom, setAttr } from '../../vanilla.ts';
+import {DIOptions} from './types.ts';
 
 
 const insertAfter = (referenceNode:Element, newNode:Element) => {
@@ -41,25 +42,42 @@ const isBefore = (referenceNode:Element|undefined|null, newNode:Element|undefine
 	return false;
 }
 
-export default function(this:TomSelect) {
+export default function(this:TomSelect, options?: DIOptions) {
 	var self = this;
 	if (self.settings.mode !== 'multi') return;
 
 	var orig_lock		= self.lock;
 	var orig_unlock		= self.unlock;
 	let sortable = true;
-		let drag_item:TomItem|undefined;
+	let drag_item:TomItem|undefined;
+
+	const updateValuesByItemsOrder = () => {
+		const values:string[] = [];
+		self.control.querySelectorAll(`[data-value]`).forEach((el:Element)=> {
+			if( (<HTMLOptionElement>el).dataset.value ){
+				let value = (<HTMLOptionElement>el).dataset.value;
+				if( value ){
+					values.push(value);
+				}
+			}
+		});
 
+		self.setValue(values);
+	}
 
 	/**
 	 * Add draggable attribute to item
 	 */
 	self.hook('after','setupTemplates',() => {
-
 		var orig_render_item = self.settings.render.item;
 
 		self.settings.render.item = (data:TomOption, escape:typeof escape_html) => {
 			const item = getDom(orig_render_item.call(self, data, escape)) as TomItem;
+
+			if (options?.dragDropIcon) {
+				item.insertAdjacentHTML('afterbegin', options.dragDropIcon);
+			}
+
 			setAttr(item,{'draggable':'true'});
 
 
@@ -69,17 +87,24 @@ export default function(this:TomSelect) {
 				evt.stopPropagation();
 			}
 
-			const dragStart = (evt:Event) => {
+			const dragStart = (evt: DragEvent) => {
 				drag_item = item;
+				if (evt.dataTransfer) {
+					evt.dataTransfer.effectAllowed = 'move';
+					evt.dataTransfer.setData("text", data.value)
+				}
 
 				setTimeout(() => {
 					item.classList.add('ts-dragging');
 				}, 0);
 
 			}
 
-			const dragOver = (evt:Event) =>{
+			const dragOver = (evt: DragEvent) =>{
 				evt.preventDefault();
+				if (evt.dataTransfer) {
+					evt.dataTransfer.dropEffect = 'move';
+				}
 				item.classList.add('ts-drag-over');
 				moveitem(item,drag_item);
 			}
@@ -103,27 +128,16 @@ export default function(this:TomSelect) {
 				drag_item?.classList.remove('ts-dragging');
 				drag_item = undefined;
 
-				var values:string[] = [];
-				self.control.querySelectorAll(`[data-value]`).forEach((el:Element)=> {
-					if( (<HTMLOptionElement>el).dataset.value ){
-						let value = (<HTMLOptionElement>el).dataset.value;
-						if( value ){
-							values.push(value);
-						}
-					}
-				});
-
-				self.setValue(values);
-			}	
+				updateValuesByItemsOrder();
+			}
 
+			item.addEventListener('mousedown', mousedown);
+			item.addEventListener('dragstart', dragStart);
+			item.addEventListener('dragenter', dragOver)
+			item.addEventListener('dragover', dragOver);
+			item.addEventListener('dragleave', dragLeave);
+			item.addEventListener('dragend', dragend);
 
-			addEvent(item,'mousedown', mousedown);
-			addEvent(item,'dragstart', dragStart);
-			addEvent(item,'dragenter', dragOver)
-			addEvent(item,'dragover', dragOver);
-			addEvent(item,'dragleave', dragLeave);
-			addEvent(item,'dragend', dragend);
-
 			return item;
 		}	
 	});
@@ -140,4 +154,35 @@ export default function(this:TomSelect) {
 		return orig_unlock.call(self);
 	});
 
+	self.on('initialize', () => {
+		// prevent browser from default drop action
+		self.control.addEventListener('drop', evt => evt.preventDefault());
+
+		self.control.addEventListener('keydown', (evt: KeyboardEvent) => {
+			const activeItem: TomItem | undefined = self.activeItems[0];
+			let targetItem: Element | null = null;
+
+			if (activeItem) {
+				if (evt.key === 'ArrowLeft') {
+					targetItem = activeItem.previousElementSibling;
+				} else if (evt.key === 'ArrowRight') {
+					targetItem = activeItem.nextElementSibling;
+				}
+
+				if (targetItem && targetItem.hasAttribute('draggable')) {
+					if (isBefore(activeItem, targetItem)) {
+						insertAfter(targetItem, activeItem);
+					} else {
+						insertBefore(targetItem, activeItem);
+					}
+
+					updateValuesByItemsOrder();
+
+					const dragItemDataValue = activeItem.getAttribute('data-value');
+					const currentActiveItem = self.control.querySelector(`[data-value="${dragItemDataValue}"]`);
+					self.setActiveItem(currentActiveItem as TomItem);
+				}
+			}
+		});
+	});
 };

src/plugins/drag_drop/types.ts

@@ -0,0 +1,3 @@
+export type DIOptions = {
+	dragDropIcon?: string;
+}

src/plugins/dropdown_input/plugin.scss

@@ -1,4 +1,15 @@
 .plugin-dropdown_input{
+	&.has-items {
+		&.hide-placeholder {
+			.#{$select-ns}-control {
+				> input {
+					opacity: 0;
+					position: absolute;
+					left: -10000px;
+				}
+			}
+		}
+	}
 
 	&.focus.dropdown-active .#{$select-ns}-control{
 		box-shadow: none;

src/plugins/dropdown_input/plugin.ts

@@ -15,11 +15,12 @@
 
 import type TomSelect from '../../tom-select.ts';
 import * as constants from '../../constants.ts';
-import { getDom, addClasses } from '../../vanilla.ts';
-import { addEvent, preventDefault } from '../../utils.ts';
+import {getDom, addClasses, setAttr} from '../../vanilla.ts';
+import {preventDefault} from '../../utils.ts';
+import {DIOptions} from './types.ts';
 
 
-export default function(this:TomSelect) {
+export default function(this:TomSelect, options?: DIOptions) {
 	const self = this;
 
 	self.settings.shouldOpen = true; // make sure the input is shown even if there are no options to display in the dropdown
@@ -37,11 +38,21 @@ export default function(this:TomSelect) {
 		const placeholder = getDom('<input class="items-placeholder" tabindex="-1" />') as HTMLInputElement;
 		placeholder.placeholder = self.settings.placeholder ||'';
 		self.control.append(placeholder);
-
 	});
 
 
 	self.on('initialize',()=>{
+		if (options?.searchPlaceholder) {
+			self.control_input.placeholder = options.searchPlaceholder;
+		}
+
+		setAttr(self.control_input, {
+			role: 'combobox',
+			'aria-haspopup': 'listbox',
+			'aria-expanded': 'true',
+			'aria-controls': self.dropdown_content.id,
+			'aria-labelledby': self.settings.labelId
+		});
 
 		// set tabIndex on control to -1, otherwise [shift+tab] will put focus right back on control_input
 		self.control_input.addEventListener('keydown',(evt:KeyboardEvent) =>{
@@ -67,8 +78,10 @@ export default function(this:TomSelect) {
 
 
 		// give the control_input focus when the dropdown is open
-		self.on('dropdown_open',() =>{
-			self.control_input.focus();
+		self.on('dropdown_open',() => {
+			if (self.settings.focusInputOnOpen !== false) {
+				self.control_input.focus();
+			}
 		});
 
 		// prevent onBlur from closing when focus is on the control_input
@@ -78,7 +91,13 @@ export default function(this:TomSelect) {
 			return orig_onBlur.call(self);
 		});
 
-		addEvent(self.control_input,'blur', () => self.onBlur() );
+		self.control_input.addEventListener('keydown', (evt: KeyboardEvent) => {
+			switch (evt.keyCode) {
+				case constants.KEY_TAB:
+					self.onBlur();
+					break;
+			}
+		});
 
 		// return focus to control to allow further keyboard input
 		self.hook('before','close',() =>{
@@ -87,6 +106,12 @@ export default function(this:TomSelect) {
 			self.focus_node.focus({preventScroll: true});
 		});
 
+		self.hook('before', 'setActiveOption', ( option:null|HTMLElement) => {
+			if (option) {
+				setAttr(self.control_input,{'aria-activedescendant':option.getAttribute('id')});
+			}
+		});
+
 	});
 
 };

src/plugins/dropdown_input/types.ts

@@ -0,0 +1,5 @@
+export type DIOptions = {
+  // placeholder for the dropdown input field
+  showControlPlaceholder?: boolean;
+  searchPlaceholder?: string;
+};

src/plugins/remove_button/plugin.ts

@@ -67,6 +67,7 @@ export default function(this:TomSelect, userOptions:RBOptions) {
 				self.removeItem(item);
 				self.refreshOptions(false);
 				self.inputState();
+				self.positionDropdown();
 			});
 
 			return item;

src/plugins/restore_on_backspace/plugin.ts

@@ -33,7 +33,7 @@ export default function(this:TomSelect, userOptions:TPluginOptions) {
 			return;
 		}
 
-		if( self.control_input.value.trim() === '' ){
+		if( self.control_input.value.trim() === ''){
 			var option = self.options[value];
 			if( option ){
 				self.setTextboxValue(options.text.call(self, option));

src/plugins/virtual_scroll/plugin.ts

@@ -16,9 +16,15 @@
 import type TomSelect from '../../tom-select.ts';
 import { TomOption } from '../../types/index.ts';
 import { addClasses } from '../../vanilla.ts';
+import {VSOptions} from './types.ts';
 
-export default function(this:TomSelect) {
+export default function(this:TomSelect, userOptions: VSOptions) {
 	const self							= this;
+
+	const pluginOptions = Object.assign<VSOptions, VSOptions>({
+		clearDropdownBeforeLoadCallback: true,
+	}, userOptions);
+
 	const orig_canLoad					= self.canLoad;
 	const orig_clearActiveOption		= self.clearActiveOption;
 	const orig_loadCallback				= self.loadCallback;
@@ -136,7 +142,7 @@ export default function(this:TomSelect) {
 	// wrap the load
 	self.hook('instead','loadCallback',( options:TomOption[], optgroups:TomOption[])=>{
 
-		if( !loading_more ){
+		if(pluginOptions.clearDropdownBeforeLoadCallback && !loading_more ){
 			self.clearOptions(clearFilter);
 		}else if( load_more_opt ){
 			const first_option = options[0];

src/plugins/virtual_scroll/types.ts

@@ -0,0 +1,3 @@
+export type VSOptions = {
+	clearDropdownBeforeLoadCallback?: boolean;
+};