@keenthemes/ktui 1.0.14 → 1.0.15

package/src/components/select/dropdown.ts

@@ -60,6 +60,14 @@ export class KTSelectDropdown extends KTComponent {
 		this._dropdownElement = dropdownElement;
 		this._config = config;
 		this._ktSelectInstance = ktSelectInstance; // Assign instance
+
+		const container = this._resolveDropdownContainer();
+		if (container) {
+			if (container !== this._dropdownElement.parentElement) {
+				container.appendChild(this._dropdownElement);
+			}
+		}
+
 		this._eventManager = new EventManager();
 		this._focusManager = new FocusManager(
 			dropdownElement,
@@ -264,16 +272,31 @@ export class KTSelectDropdown extends KTComponent {
 		KTDom.reflow(this._dropdownElement);
 
 		// Apply z-index
+		let zIndexToApply: number | null = null;
+
 		if (this._config.dropdownZindex) {
-			this._dropdownElement.style.zIndex =
-				this._config.dropdownZindex.toString();
-		} else {
-			const parentZindex = KTDom.getHighestZindex(this._element);
-			if (parentZindex) {
-				this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
+			zIndexToApply = this._config.dropdownZindex;
+		}
+
+		// Consider the dropdown's current z-index if it's already set and higher
+		const currentDropdownZIndexStr = KTDom.getCssProp(this._dropdownElement, 'z-index');
+		if (currentDropdownZIndexStr && currentDropdownZIndexStr !== 'auto') {
+			const currentDropdownZIndex = parseInt(currentDropdownZIndexStr);
+			if (!isNaN(currentDropdownZIndex) && currentDropdownZIndex > (zIndexToApply || 0)) {
+				zIndexToApply = currentDropdownZIndex;
 			}
 		}
 
+		// Ensure dropdown is above elements within its original toggle's parent context
+		const toggleParentContextZindex = KTDom.getHighestZindex(this._element); // _element is the select wrapper
+		if (toggleParentContextZindex !== null && toggleParentContextZindex >= (zIndexToApply || 0)) {
+			zIndexToApply = toggleParentContextZindex + 1;
+		}
+
+		if (zIndexToApply !== null) {
+			this._dropdownElement.style.zIndex = zIndexToApply.toString();
+		}
+
 		// Initialize popper
 		this._initPopper();
 
@@ -395,4 +418,20 @@ export class KTSelectDropdown extends KTComponent {
 		// Remove data reference
 		KTData.remove(this._element, this._name);
 	}
+
+	private _resolveDropdownContainer(): HTMLElement | null {
+		const containerSelector = this._config.dropdownContainer;
+		if (containerSelector && containerSelector !== 'body') {
+			const containerElement = document.querySelector(containerSelector) as HTMLElement | null;
+			if (!containerElement && this._config.debug) {
+				console.warn(
+					`KTSelectDropdown: dropdownContainer selector "${containerSelector}" not found. Dropdown will remain in its default position.`,
+				);
+			}
+			return containerElement;
+		} else if (containerSelector === 'body') {
+			return document.body;
+		}
+		return null;
+	}
 }

package/src/components/select/select.ts

@@ -362,10 +362,8 @@ export class KTSelect extends KTComponent {
 		// Setup HTML structure
 		this._createHtmlStructure();
 		this._setupElementReferences();
-		this._initZIndex();
 
 		// Initialize options
-		// this._initializeOptionsHtml();
 		this._preSelectOptions(this._element);
 
 		// Apply disabled state if needed
@@ -427,20 +425,27 @@ export class KTSelect extends KTComponent {
 		// Add the display element to the wrapper
 		wrapperElement.appendChild(displayElement);
 
-		// Move classes from original select to display element
+		// Move classes from original select to wrapper and display elements
 		if (this._element.classList.length > 0) {
-			// Exclude kt-select class from being added to the wrapper element
-			const classes = Array.from(this._element.classList).filter(
-				(className) => className !== 'kt-select',
+			const originalClasses = Array.from(this._element.classList);
+			const displaySpecificClasses = ['kt-select', 'kt-select-sm', 'kt-select-lg'];
+
+			const classesForWrapper = originalClasses.filter(
+				(className) => !displaySpecificClasses.includes(className)
 			);
-			wrapperElement.classList.add(...classes);
+			if (classesForWrapper.length > 0) {
+				wrapperElement.classList.add(...classesForWrapper);
+			}
 
-			// If element has class kt-select, move it to display element
-			if (this._element.classList.contains('kt-select')) {
-				displayElement.classList.add('kt-select');
+			// Move display-specific classes to display element
+			const classesForDisplay = originalClasses.filter(
+				(className) => displaySpecificClasses.includes(className)
+			);
+			if (classesForDisplay.length > 0) {
+				displayElement.classList.add(...classesForDisplay);
 			}
 
-			this._element.className = '';
+			this._element.className = ''; // Clear classes from original select element
 		}
 
 		// Create an empty dropdown first (without options) using template
@@ -458,9 +463,6 @@ export class KTSelect extends KTComponent {
 		// Create options container using template
 		const optionsContainer = defaultTemplates.options(this._config);
 
-		// Clear the options container
-		optionsContainer.innerHTML = '';
-
 		// Add each option directly to the container
 		options.forEach((optionElement) => {
 			// Skip empty placeholder options (only if BOTH value AND text are empty)
@@ -701,25 +703,6 @@ export class KTSelect extends KTComponent {
 		}
 	}
 
-	/**
-	 * Set appropriate z-index for dropdown
-	 */
-	private _initZIndex() {
-		let zindex: number = this._config.dropdownZindex as number;
-		if (
-			parseInt(KTDom.getCssProp(this._dropdownContentElement, 'z-index')) >
-			zindex
-		) {
-			zindex = parseInt(
-				KTDom.getCssProp(this._dropdownContentElement, 'z-index'),
-			);
-		}
-		if (KTDom.getHighestZindex(this._wrapperElement) > zindex) {
-			zindex = KTDom.getHighestZindex(this._wrapperElement) + 1;
-		}
-		this._dropdownContentElement.style.zIndex = String(zindex);
-	}
-
 	/**
 	 * ========================================================================
 	 * DROPDOWN MANAGEMENT