chore: updated arrow-down functionality

Author: ArathyKumar

elements/pf-search-input/demo/disabled.html

@@ -0,0 +1,34 @@
+<form class="container">
+  <div class="search-input-container">
+    <pf-search-input disabled id="search-input" name="search" placeholder="Search">
+      <pf-option>Blue</pf-option>
+      <pf-option>Green</pf-option>
+      <pf-option>Magenta</pf-option>
+      <pf-option>Orange</pf-option>
+      <pf-option>Purple</pf-option>
+      <pf-option>Periwinkle</pf-option>
+      <pf-option>Pink</pf-option>
+      <pf-option>Red</pf-option>
+      <pf-option>Yellow</pf-option>
+    </pf-search-input>
+    <pf-button> Search</pf-button>
+  </div>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-search-input/pf-search-input.js';
+</script>
+
+<style>
+  .container {
+    padding: 40px;
+    .search-input-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      #search-input {
+        margin-right: 1rem;
+      }
+    }
+  }
+</style>

elements/pf-search-input/pf-search-input.css

@@ -68,6 +68,11 @@
 	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
 	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+
+	/* --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); */
 }
 
 :host,
@@ -83,8 +88,9 @@
 	display: none !important;
 }
 
-:host([disabled]) {
+:host([aria-disabled="true"]) {
 	pointer-events: none !important;
+	cursor: not-allowed !important;
 }
 
 #outer.disabled {
@@ -107,6 +113,8 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
+	max-height: 300px;
+	overflow: hidden;
 }
 
 #listbox {
@@ -122,22 +130,22 @@
 	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 	pointer-events: none;
 	cursor: not-allowed;
-	;
+	
 	--_active-descendant-color: transparent;
 	--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
 }
 
 #toggle {
-	background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+	background-color: var(--pf-c-search-input__toggle--BackgroundColor, #fff) !important;
 }
 
 #toggle,
 #toggle-input {
 	display: flex;
 	font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
-	font-size: var(--pf-global--FontSize--md, 16px);
-	font-weight: var(--pf-global--FontWeight--normal, 400);
-	line-height: 1.6;
+	font-size: var(--pf-c-search-input__toggle--FontSize, 1rem);
+	font-weight: var(	--pf-c-search-input__toggle--FontWeight, 400);
+	line-height: var(--pf-c-search-input__toggle--LineHeight, 1.5);
 }
 
 #toggle {
@@ -160,7 +168,6 @@
 	text-align: left;
 	border-radius: 0;
 	padding-left: 3rem;
-	/*Change it to variable*/
 }
 
 #toggle-input {
@@ -172,6 +179,7 @@
 
 .disabled #toggle-input {
 	pointer-events: none;
+	cursor: not-allowed;
 }
 
 #close-button {

elements/pf-search-input/pf-search-input.ts

@@ -174,8 +174,8 @@ export class PfSearchInput extends LitElement {
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
     isItem: item => item instanceof PfOption,
-    setItemActive: (item, active) => item.active = active,
-    setItemSelected: (item, selected) => item.selected = selected,
+    setItemActive: (item, active) => this.#setItemActive(item, active),
+    setItemSelected: (item, selected) => this.#setItemSelected(item, selected),
   });
 
   static {
@@ -252,9 +252,10 @@ export class PfSearchInput extends LitElement {
           </div>
           <input 
             id="toggle-input"
-            ?disabled="${disabled}"
             @input=${this.#onChange}
             @keyup=${this.#onSubmit}
+            @keydown=${this.#onKeyDown}
+            aria-disabled="${disabled}"
             placeholder="${placeholder}"
           >
           <div class="close-button-container">
@@ -316,13 +317,6 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSearchChangeEvent());
   }
 
-  @observes('value')
-  private collapseOnEmpty() {
-    if (this.value === '') {
-      this.expanded = false;
-    }
-  }
-
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -396,16 +390,41 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  #onKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    if (target?.getAttribute('aria-disabled') === 'true') {
+      // Allow Tab and Shift+Tab to move focus
+      if (event.key === 'Tab') {
+        return;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   #delay(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
   async #showListbox() {
     await this.#delay(10);
-    if (this.value !== '') {
+    if (!this.disabled) {
       this.expanded ||= true;
     }
   }
+
+  #setItemSelected(item: PfOption, selected: boolean) {
+    item.selected = selected;
+    this.#setItemActive(item, selected);
+  }
+
+  #setItemActive(item: PfOption, active: boolean) {
+    item.active = active;
+    if (this.expanded) {
+      const activeOption = this.querySelector('pf-option[active]');
+      activeOption?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
+    }
+  }
 }
 
 declare global {