Merge pull request #12 from Travelopia/feat/disabled-option-in-multi-…

…select Add disabled options support in `tp-multi-select`
Travelopia · Dec 12, 2023 · 8fd61d5 · 8fd61d5
2 parents 484105d + 07f4457
commit 8fd61d5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/multi-select/index.html b/src/multi-select/index.html
@@ -71,6 +71,7 @@
 				<tp-multi-select-option value="varun" label="Varun">Varun</tp-multi-select-option>
 				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>
 				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
+				<tp-multi-select-option value="deepak" label="Deepak" disabled="yes">Deepak</tp-multi-select-option>
 			</tp-multi-select-options>
 		</tp-multi-select>
 
@@ -102,7 +103,7 @@
 				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>
 				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
 				<tp-multi-select-option value="jack" label="Jack">Jack</tp-multi-select-option>
-				<tp-multi-select-option value="jill" label="Jill">Jill</tp-multi-select-option>
+				<tp-multi-select-option value="jill" label="Jill" disabled="yes">Jill</tp-multi-select-option>
 			</tp-multi-select-options>
 		</tp-multi-select>
 	</main>

diff --git a/src/multi-select/style.scss b/src/multi-select/style.scss
@@ -34,6 +34,11 @@ tp-multi-select-option {
 	&[hidden="yes"] {
 		display: none;
 	}
+
+	&[disabled="yes"] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 }
 
 tp-multi-select-placeholder {

diff --git a/src/multi-select/tp-multi-select-select-all.ts b/src/multi-select/tp-multi-select-select-all.ts
@@ -26,7 +26,7 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
 			return;
 		}
 
-		if ( options.length === multiSelect.value.length ) {
+		if ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {
 			this.setAttribute( 'selected', 'yes' );
 			this.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';
 		} else {

diff --git a/src/multi-select/tp-multi-select.ts b/src/multi-select/tp-multi-select.ts
@@ -250,7 +250,9 @@ export class TPMultiSelectElement extends HTMLElement {
 		// Select all options.
 		const styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value="${ value }"]` );
 		styledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			option.setAttribute( 'selected', 'yes' );
+			if ( 'yes' !== option.getAttribute( 'disabled' ) ) {
+				option.setAttribute( 'selected', 'yes' );
+			}
 		} );
 
 		// Search stuff.
@@ -274,7 +276,9 @@ export class TPMultiSelectElement extends HTMLElement {
 	selectAll(): void {
 		const styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );
 		styledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			option.setAttribute( 'selected', 'yes' );
+			if ( 'yes' !== option.getAttribute( 'disabled' ) ) {
+				option.setAttribute( 'selected', 'yes' );
+			}
 		} );
 
 		this.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );