playbook_ui 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.dropdownautocomplete7493

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -8,7 +8,7 @@
         align: "center",
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
-        cursor: "pointer",
+        cursor: object.autocomplete ? "text" : "pointer",
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
@@ -24,7 +24,17 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% if object.autocomplete %>
+                        <input
+                            data-dropdown-autocomplete
+                            class="dropdown_input"
+                            type="text"
+                            placeholder="<%= object.placeholder || 'Select…' %>"
+                            autocomplete="off"
+                        />
+                    <% else %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% end %>
                 <% end %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -9,6 +9,8 @@ module Playbook
                 default: ""
       prop :placeholder, type: Playbook::Props::String
       prop :custom_display
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: false
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -23,7 +25,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", "select_only")
+        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -11,6 +11,8 @@ const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
 const DROPDOWN_INPUT = "#dropdown-selected-option";
+const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
+const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -25,9 +27,11 @@ export default class PbDropdown extends PbEnhancedElement {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.setDefaultValue();
     this.bindEventListeners();
+    this.bindSearchInput();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
     this.handleFormReset();
+    this.bindSearchBar();
   }
 
   bindEventListeners() {
@@ -45,6 +49,53 @@ export default class PbDropdown extends PbEnhancedElement {
     );
   }
 
+  bindSearchBar() {
+    this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
+    if (!this.searchBar) return;
+  
+    this.searchBar.addEventListener("input", (e) =>
+      this.handleSearch(e.target.value)
+    );
+  }
+
+  bindSearchInput() {
+    this.searchInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
+    if (!this.searchInput) return;
+
+    // Focus the input when anyone clicks the wrapper
+    this.element
+      .querySelector(TRIGGER_SELECTOR)
+      ?.addEventListener("click", () => this.searchInput.focus());
+
+    // Live filter
+    this.searchInput.addEventListener("input", (e) =>
+      this.handleSearch(e.target.value)
+    );
+  }
+
+  handleSearch(term = "") {
+    const lcTerm = term.toLowerCase();
+    this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
+      const label = JSON.parse(opt.dataset.dropdownOptionLabel).label
+        .toString()
+        .toLowerCase();
+
+      // hide or show option
+      const match = label.includes(lcTerm);
+      opt.style.display = match ? "" : "none";
+    });
+
+    if (this.target.classList.contains("open")) {
+      const el = this.target;
+        el.style.height = "auto";
+        requestAnimationFrame(() => {
+        const newHeight = el.scrollHeight + "px";
+          el.offsetHeight; // force reflow
+        el.style.height = newHeight;
+      });
+    }
+  }
+
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
@@ -59,6 +110,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleDocumentClick(event) {
+    if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
     if (this.isClickOutside(event) && this.target.classList.contains("open")) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
@@ -99,6 +151,11 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
 
+    const autocompleteInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
+    if (autocompleteInput){
+      autocompleteInput.value = JSON.parse(value).label;
+    }
+
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       if (this.target.classList.contains("open")) {

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -1,4 +1,6 @@
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
+const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
+
 export class PbDropdownKeyboard {
   constructor(dropdown) {
     this.dropdown = dropdown;
@@ -7,6 +9,9 @@ export class PbDropdownKeyboard {
       this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
     );
     this.focusedOptionIndex = -1;
+    this.searchInput = this.dropdownElement.querySelector(
+      SEARCH_INPUT_SELECTOR
+    );
     this.init();
   }
 
@@ -15,6 +20,18 @@ export class PbDropdownKeyboard {
       "keydown",
       this.handleKeyDown.bind(this)
     );
+    if (this.searchInput) {
+      this.searchInput.addEventListener("input", () =>
+        this.openDropdownIfClosed()
+      );
+    }
+  }
+
+  openDropdownIfClosed() {
+    if (!this.dropdown.target.classList.contains("open")) {
+      this.dropdown.showElement(this.dropdown.target);
+      this.dropdown.updateArrowDisplay(true);
+    }
   }
 
   handleKeyDown(event) {
@@ -50,6 +67,15 @@ export class PbDropdownKeyboard {
         this.dropdown.updateArrowDisplay(false);
         this.resetFocus();
         break;
+      case "Backspace":
+        if (this.searchInput) {
+          setTimeout(() => {
+            if (this.searchInput.value.trim() === "") {
+              this.dropdown.resetDropdownValue();
+            }
+          }, 0); 
+        }
+        break;
       default:
         break;
     }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -46,7 +46,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     inputRef,
     isDropDownClosed,
     setFocusedOptionIndex,
-    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -67,7 +66,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={triggerRef ? {} : { position: "absolute"}}
+        style={{ position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -53,7 +53,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     selected,
     setIsInputFocused,
     toggleDropdown,
-    triggerRef,
   } = useContext(DropdownContext);
 
   const handleKeyDown = useHandleOnKeyDown();
@@ -99,7 +98,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         id={id}
     >
       {
-        !triggerRef && (
           children ? (
             <div
                 onClick={() => toggleDropdown()}
@@ -147,7 +145,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={() => toggleDropdown()}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -181,7 +182,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
               </Flex>
             </>
           )
-        )
       }
     </div>
   );

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>