playbook_ui 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15153 → 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15196

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 49a8343b1030c6b58f88af1d240a29af171c8dcbb08f1792b3dca5e470c8e116
-  data.tar.gz: 3854df67c7b03ff20590bb8a553955c032b6422d55e496792c118fc6e9362a09
+  metadata.gz: 86ebb202571d08c83e9c57eb23414f38c9b981fd7447511524aae6212a6121a5
+  data.tar.gz: 0d6de802cd0b66ac46899ab8b21aa57aa81e2865df6cdcd7dd4868d16b16aac8
 SHA512:
-  metadata.gz: 999b852a45467fde5a1c5fc3ee13a36503c0ba4f1fa9877365f833737f498d1d9942d4ac6d04eda96685e1a66567f57889708ed43ef133d52df2d5e2d2d61326
-  data.tar.gz: 406fda8c1f6bab01584652546f19f6d0d14b7e618d388c61d1b398943e39abd75cfc5a789ffbaf388efefea7ba1420de934360dc1a90f9829d6870bcd60949e0
+  metadata.gz: 4db3ecfcf536c5a10d212451418d22bd51b83a3568bfaf2bdc56a7ed0a82650ee0e5598fe1254c5aecb436fcb9ee998774fcd533f52c808df027961e905f5aa7
+  data.tar.gz: f349ae9d1ad82c6ae2b958fc213c1b4e17d37f0d750da01c71c21d0e313369b8e11c85b5a44faa302e19e562f18d0c0efa464f010fa94e5109ae61ed7855a632

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -674,12 +674,18 @@
     @each $color_name, $color_value in $border_color_options {
       &.column-group-border-#{$color_name} {
         @if $theme == "light" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $white,
             lighten($silver, $opacity_7)
           );
         } @else if $theme == "dark" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $bg_dark_card,
@@ -715,6 +721,10 @@
       width: 100%;
       @include scrollbar-styling;
 
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_light);
+      }
+
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
@@ -1008,6 +1018,11 @@
       .sticky-left {
         background-color: $bg_dark;
       }
+
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_dark);
+      }
+
       @include advanced-table-sticky-mixin(
         $border_dark,
         $bg_dark_card,
@@ -1026,6 +1041,10 @@
           }
         }
 
+        &:not(.advanced-table-no-table-container) {
+          @include advanced-table-sticky-wrapper-frame($border_dark);
+        }
+
         // These are the responsive borders that should NOT inherit the custom color
         @include advanced-table-sticky-mixin(
           $border_dark,

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -127,6 +127,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
+  const noTableCardContainer = tableProps?.container === false;
+
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -281,6 +283,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -48,9 +48,16 @@ module Playbook
           hidden_action_bar_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
+        additional_classes << "advanced-table-no-table-container" if no_table_card_container?
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
+      def no_table_card_container?
+        return false unless table_props.is_a?(Hash)
+
+        table_props[:container] == false || table_props["container"] == false
+      end
+
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -1,3 +1,9 @@
+// Acts as outer “card frame” on the advanced-table wrapper (table-card from Table) is included from `_advanced_table.scss` only when `:not(.advanced-table-no-table-container)`/container: false is not present.
+@mixin advanced-table-sticky-wrapper-frame($border-color) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+}
+
 @mixin advanced-table-sticky-mixin(
   $border-color,
   $bg-main,
@@ -5,8 +11,6 @@
   $highlight: #E5EEFA,
   $highlight-dark: #202850,
 ) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
   [class^="pb_table"].table-sm:not(.no-hover).table-card

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md

@@ -0,0 +1,19 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```erb
+<%= pb_rails("flex", props: {
+  display: { xs: "flex", default: "none" },
+  orientation: "column",
+  width: "100%",
+}) do %>
+  <%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
+<% end %>
+```

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md

@@ -0,0 +1,23 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```jsx
+import { Flex, Button } from "playbook-ui"
+
+const Example = () => (
+  <Flex
+    display={{ xs: "flex", default: "none" }}
+    orientation="column"
+    width="100%"
+  >
+    <Button fullWidth text="Add" />
+  </Flex>
+)
+```

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -43,6 +43,11 @@ $pb_button_styles: (
       @include pb_circle_icon_button;
     }
   }
+
+  .pb_button_kit.pb_button_loading svg.loading-icon {
+    position: absolute;
+  }
+
   :first-child {
     &.pb_button_kit.pb_button_link {
       @include pb_circle_icon_button_active;

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -22,6 +22,12 @@ class PbFormValidation extends PbEnhancedElement {
     return FORM_SELECTOR
   }
 
+  static start() {
+    if (this.__pbStarted) return
+    this.__pbStarted = true
+    super.start()
+  }
+
   connect() {
     this.boundFields = new WeakSet()
     this.bindValidationListeners()
@@ -65,18 +71,22 @@ class PbFormValidation extends PbEnhancedElement {
       const isTimePickerInput = field.closest('.pb_time_picker')
       if (isTimePickerInput) return
 
-      // Reset and then apply any custom message before checking validity.
+      // Reset any previous custom validity before checking validity.
       field.setCustomValidity('')
       const kitElement = this.getKitElement(field)
-      const message = this.getValidationMessage(field, kitElement)
-      if (message) field.setCustomValidity(message)
 
       if (field.validity.valid) {
         this.clearError(field)
-      } else {
-        foundInvalid = true
-        this.showValidationMessage(field)
+        return
       }
+
+      // Only set custom message when invalid (otherwise the field becomes
+      // permanently invalid).
+      const message = this.getValidationMessage(field, kitElement)
+      if (message) field.setCustomValidity(message)
+
+      foundInvalid = true
+      this.showValidationMessage(field)
     })
 
     return foundInvalid
@@ -143,15 +153,16 @@ class PbFormValidation extends PbEnhancedElement {
   showValidationMessage(target) {
     const { parentElement } = target
     const kitElement = this.getKitElement(target)
-    if (!kitElement) return
 
-    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
-    
-    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
+    const isPhoneNumberInput = kitElement?.classList?.contains('pb_phone_number_input') || false
+    const isTimePickerInput = kitElement?.classList?.contains('pb_time_picker') || false
 
     // ensure clean error message state
     this.clearError(target)
-    kitElement.classList.add('error')
+    if (kitElement) kitElement.classList.add('error')
+
+    const controlWrapper = this.getControlWrapper(target, kitElement)
+    if (controlWrapper) controlWrapper.classList.add('error')
 
     if (!isPhoneNumberInput && !isTimePickerInput) {
       const errorParent = this.getErrorParent(target, kitElement, parentElement)
@@ -183,6 +194,9 @@ class PbFormValidation extends PbEnhancedElement {
     const kitElement = this.getKitElement(target)
     if (kitElement) kitElement.classList.remove('error')
 
+    const controlWrapper = this.getControlWrapper(target, kitElement)
+    if (controlWrapper) controlWrapper.classList.remove('error')
+
     const errorParent = this.getErrorParent(target, kitElement, parentElement)
     const messageEl = errorParent.querySelector(`[${FORM_VALIDATION_MESSAGE_ATTR}="true"]`)
     if (messageEl) {
@@ -201,6 +215,9 @@ class PbFormValidation extends PbEnhancedElement {
     const candidate =
       target.closest('.text_input_wrapper') ||
       target.closest('.pb_select_kit_wrapper') ||
+      target.closest('.dropdown_wrapper') ||
+      target.closest('.input_wrapper') ||
+      target.closest('.pb_typeahead_wrapper') ||
       kitElement ||
       parentElement
 
@@ -211,6 +228,18 @@ class PbFormValidation extends PbEnhancedElement {
     return candidate
   }
 
+  getControlWrapper(target, kitElement) {
+    // Some kits apply error styles to a specific wrapper, not the outer kit element.
+    return (
+      target.closest('.dropdown_wrapper') ||
+      target.closest('.pb_select_kit_wrapper') ||
+      target.closest('.text_input_wrapper') ||
+      kitElement?.querySelector?.('.dropdown_wrapper') ||
+      kitElement?.querySelector?.('.pb_select_kit_wrapper') ||
+      null
+    )
+  }
+
   isReactTypeaheadField(el) {
     return !!(
       el?.closest?.('[data-pb-react-component="Typeahead"]') ||
@@ -229,7 +258,15 @@ class PbFormValidation extends PbEnhancedElement {
   }
 
   getKitElement(target) {
-    return target.closest(KIT_SELECTOR) || target.parentElement?.closest(KIT_SELECTOR)
+    return (
+      target.closest(KIT_SELECTOR) ||
+      target.parentElement?.closest(KIT_SELECTOR) ||
+      // Some kits don't expose a *_kit class but do expose data hooks.
+      target.closest('[data-pb-select]') ||
+      target.closest('[data-pb-date-picker]') ||
+      target.closest('[data-pb-typeahead-kit]') ||
+      null
+    )
   }
 
   getValidationMessage(target, kitElement) {
@@ -237,7 +274,9 @@ class PbFormValidation extends PbEnhancedElement {
 
     const wrapperWithMessage =
       target.closest?.('[data-validation-message]') ||
-      target.closest?.('[data-pb-select]')
+      target.closest?.('[data-pb-select]') ||
+      target.closest?.('.dropdown_wrapper') ||
+      target.closest?.('.pb_select_kit_wrapper')
     const fromWrapper = wrapperWithMessage?.dataset?.validationMessage
 
     const fromKit = kitElement?.dataset?.validationMessage
@@ -266,4 +305,18 @@ class PbFormValidation extends PbEnhancedElement {
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation
+
+// In consuming Rails apps, `DOMContentLoaded` may not fire on navigation when
+// Turbo is enabled. Autostart ensures validation works consistently across repos
+// as long as this bundle is loaded.
+const __pbStartFormValidation = () => {
+  if (!window.PbFormValidation || typeof window.PbFormValidation.start !== 'function') return
+  if (window.__pbFormValidationStarted) return
+  window.__pbFormValidationStarted = true
+  window.PbFormValidation.start()
+}
+
+document.addEventListener('DOMContentLoaded', __pbStartFormValidation)
+document.addEventListener('turbo:load', __pbStartFormValidation)
+document.addEventListener('turbo:render', __pbStartFormValidation)

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -51,6 +51,7 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[] | any;
   onChange?: (event: { target: { name?: string; value: any } }) => void;
   onSelect?: (prop: { [key: string]: any }) => void;
+  placeholder?: string;
   selectedIds?: string[] | any;
   variant?: "multi" | "single";
   wrapped?: boolean;
@@ -100,6 +101,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       treeData,
       onChange = () => null,
       onSelect = () => null,
+      placeholder: placeholderText = "Start typing...",
       selectedIds,
       variant = "multi",
       wrapped,
@@ -675,7 +677,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                       ? `${itemsSelectedLength()} ${
                           itemsSelectedLength() === 1 ? "item" : "items"
                         } selected`
-                      : "Start typing..."
+                      : placeholderText
                   }
                     required={required}
                     value={singleSelectedItem.value || filterItem}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb

@@ -0,0 +1,109 @@
+<%
+  tree_base = [{
+      label: "Power Home Remodeling",
+      value: "powerHomeRemodeling",
+      id: "100",
+      expanded: true,
+      children: [
+        {
+          label: "People",
+          value: "people",
+          id: "101",
+          expanded: true,
+          children: [
+            {
+              label: "Talent Acquisition",
+              value: "talentAcquisition",
+              id: "102",
+            },
+            {
+              label: "Business Affairs",
+              value: "business Affairs",
+              id: "103",
+              children: [
+                {
+                  label: "Initiatives",
+                  value: "initiatives",
+                  id: "104",
+                },
+                {
+                  label: "Learning & Development",
+                  value: "learningAndDevelopment",
+                  id: "105",
+                },
+              ],
+            },
+            {
+              label: "People Experience",
+              value: "peopleExperience",
+              id: "106",
+            },
+          ],
+        },
+        {
+          label: "Contact Center",
+          value: "contactCenter",
+          id: "107",
+          children: [
+            {
+              label: "Appointment Management",
+              value: "appointmentManagement",
+              id: "108",
+            },
+            {
+              label: "Customer Service",
+              value: "customerService",
+              id: "109",
+            },
+            {
+              label: "Energy",
+              value: "energy",
+              id: "110",
+            },
+          ],
+        },
+      ],
+  }]
+
+  prefix_mls_ids = nil
+  prefix_mls_ids = ->(nodes, pfx) {
+    nodes.map do |n|
+      h = n.dup
+      h[:id] = "#{pfx}#{n[:id]}"
+      h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
+      h
+    end
+  }
+
+  tree_multi = prefix_mls_ids.call(tree_base, "phm_")
+  tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
+  tree_single = prefix_mls_ids.call(tree_base, "phs_")
+%>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-multi-rails",
+  label: "Multi (default)",
+  margin_bottom: "sm",
+  name: "placeholder_multi",
+  tree_data: tree_multi,
+  placeholder: "Search or choose options…",
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-return-all-rails",
+  label: "Multi (return all selected)",
+  margin_bottom: "sm",
+  name: "placeholder_return_all",
+  placeholder: "Departments...",
+  return_all_selected: true,
+  tree_data: tree_return_all,
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-single-rails",
+  label: "Single",
+  name: "placeholder_single",
+  placeholder: "Select one option…",
+  tree_data: tree_single,
+  variant: "single",
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeTemplate = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+function prefixTreeIds(nodes, prefix) {
+  return nodes.map((node) => ({
+    ...node,
+    id: `${prefix}${node.id}`,
+    children:
+      node.children && node.children.length > 0
+        ? prefixTreeIds(node.children, prefix)
+        : node.children,
+  }));
+}
+
+const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
+const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
+const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
+
+const MultiLevelSelectPlaceholder = () => (
+  <>
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-multi"
+        label="Multi (default)"
+        marginBottom="sm"
+        name="placeholder_multi"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — default", selectedNodes)
+        }
+        placeholder="Search or choose options…"
+        treeData={treeDataMulti}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-return-all"
+        label="Multi (return all selected)"
+        marginBottom="sm"
+        name="placeholder_return_all"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — return all selected", selectedNodes)
+        }
+        placeholder="Departments..."
+        returnAllSelected
+        treeData={treeDataReturnAll}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-single"
+        label="Single"
+        name="placeholder_single"
+        onSelect={(selectedNodes) =>
+          console.log("Single", selectedNodes)
+        }
+        placeholder="Select one option…"
+        treeData={treeDataSingle}
+        variant="single"
+    />
+  </>
+);
+
+export default MultiLevelSelectPlaceholder;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md

@@ -0,0 +1 @@
+Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -18,6 +18,7 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_placeholder: Placeholder
 
   react:
     - multi_level_select_default: Default
@@ -40,3 +41,4 @@ examples:
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
     - multi_level_select_react_reset_key: Reset with Key (React)
+    - multi_level_select_placeholder: Placeholder

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
 export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
+export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,6 +32,8 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
+      prop :placeholder, type: Playbook::Props::String,
+                         default: "Start typing..."
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
       prop :show_checked_children, type: Playbook::Props::Boolean,
@@ -50,6 +52,7 @@ module Playbook
           inputDisplay: input_display,
           name: name,
           label: label,
+          placeholder: placeholder,
           treeData: tree_data,
           required: required,
           requiredIndicator: required_indicator,

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -173,6 +173,33 @@ describe('MultiLevelSelect', () => {
     expect(label).toHaveTextContent("Select Location")
     expect(label).not.toHaveTextContent("*")
   })
+
+  test('should use default placeholder when none is passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-default"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Start typing...')
+    ).toBeInTheDocument()
+  })
+
+  test('should use custom placeholder when passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-custom"
+          placeholder="Choose items…"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Choose items…')
+    ).toBeInTheDocument()
+  })
 })
 
 describe('MultiLevelSelect multi variant', () => {