tom-select/src/plugins/dropdown_input/plugin.ts

Tom Select is a versatile and dynamic <select> UI control. Forked from Selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, etc.

/**
 * Plugin: "dropdown_input" (Tom Select)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */

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';


export default function(this:TomSelect) {
	const self = this;

	self.settings.shouldOpen = true; // make sure the input is shown even if there are no options to display in the dropdown

	self.hook('before','setup',()=>{
		self.focus_node		= self.control;

		addClasses( self.control_input, 'dropdown-input');

	 	const div = getDom('<div class="dropdown-input-wrap">');
		div.append(self.control_input);
		self.dropdown.insertBefore(div, self.dropdown.firstChild);

		// set a placeholder in the select control
		const placeholder = getDom('<input class="items-placeholder" tabindex="-1" />') as HTMLInputElement;
		placeholder.placeholder = self.settings.placeholder ||'';
		self.control.append(placeholder);
		/**
		 * TomSelect renders a custom control with a focusable <input class="items-placeholder">.
		 * The source <select>'s aria-label is not automatically propagated to that input,
		 * which triggers "Missing form label" accessibility warnings.
		 * This helper copies the label from the <select> onto the generated input.
		 */
		const label = self.input?.getAttribute('aria-label');
		if (!label) return;
		placeholder.setAttribute('aria-label', label);
	});

	self.on('initialize',()=>{
		// set tabIndex on control to -1, otherwise [shift+tab] will put focus right back on control_input
		self.control_input.addEventListener('keydown',(evt:KeyboardEvent) =>{
		//addEvent(self.control_input,'keydown' as const,(evt:KeyboardEvent) =>{
			switch( evt.keyCode ){
				case constants.KEY_ESC:
					if (self.isOpen) {
						preventDefault(evt,true);
						self.close();
					}
					self.clearActiveItems();
				return;
				case constants.KEY_TAB:
					self.focus_node.tabIndex = -1;
				break;
			}
			return self.onKeyDown.call(self,evt);
		});

		self.on('blur',()=>{
			self.focus_node.tabIndex = self.isDisabled ? -1 : self.tabIndex;
		});


		// give the control_input focus when the dropdown is open
		self.on('dropdown_open',() =>{
			self.control_input.focus();
		});

		// prevent onBlur from closing when focus is on the control_input
		const orig_onBlur = self.onBlur;
		self.hook('instead','onBlur',(evt?:FocusEvent)=>{
			if( evt && evt.relatedTarget == self.control_input ) return;
			return orig_onBlur.call(self);
		});

		addEvent(self.control_input,'blur', () => self.onBlur() );

		// return focus to control to allow further keyboard input
		self.hook('before','close',() =>{

			if( !self.isOpen ) return;
			self.focus_node.focus({preventScroll: true});
		});

	});
};