playbook_ui 15.5.0 → 15.6.0.pre.alpha.PLAY2611selectinputoptions12951

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+
+const MultipleUsersWithTooltip = (props) => {
+    return (
+        <div>
+            <MultipleUsers
+                users={[
+                    {
+                        name: 'Patrick Welch',
+                        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+                        tooltip: "Patrick Welch - Online"
+                    },
+                    {
+                        name: 'Lucille Sanchez',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+                        tooltip: "Lucille Sanchez - Offline"
+                    },
+                    {
+                        name: 'Beverly Reyes',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+                        tooltip: "Beverly Reyes - Online"
+                    },
+                    {
+                        name: 'Keith Craig',
+                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+                        tooltip: "Keith Craig - Away"
+                    },
+                    {
+                        name: 'Alicia Cooper',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+                        tooltip: "Alicia Cooper - Busy"
+                    },
+                ]}
+                withTooltip
+                {...props}
+            />
+        </div>
+    )
+}
+``
+export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -0,0 +1 @@
+Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

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

@@ -10,6 +10,7 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+  - multiple_users_with_tooltip: With Tooltip
 
   swift:
   - multiple_users_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
 export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
+export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js

@@ -49,4 +49,29 @@ test('should render aria-label', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render withTooltip prop', () => {
+  render(
+      <MultipleUsers
+          data={{ testid: testId }}
+          users={[
+            {
+              name: 'Patrick Welch',
+              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+              tooltip: "Patrick Welch - Online"
+            },
+            {
+              name: 'Lucille Sanchez',
+              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+              tooltip: "Lucille Sanchez - Offline"
+            },
+          ]}
+          withTooltip
+      />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const childWithTooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(childWithTooltip).not.toBeNull()
 })

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -110,13 +110,25 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const hasBlurredRef = useRef<boolean>(false);
+  const formSubmittedRef = useRef<boolean>(false);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
+  const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
+  
+  // Keep refs in sync with state for use in event listeners
+  useEffect(() => {
+    hasBlurredRef.current = hasBlurred
+  }, [hasBlurred])
+  
+  useEffect(() => {
+    formSubmittedRef.current = formSubmitted
+  }, [formSubmitted])
 
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
@@ -143,8 +155,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   // Determine which error to display
-  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
@@ -259,7 +271,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
 
-     if (!hasTyped && !error) return
+     // Only validate if field has been blurred or form has been submitted
+     // Use refs here since state updates are async and we need current values
+     if (!hasBlurredRef.current && !formSubmittedRef.current) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -280,6 +294,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
         const invalidInputName = target.name || target.getAttribute('name')
         if (invalidInputName === name) {
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           // Trigger validation when form is submitted
           validateErrors()
@@ -305,6 +320,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        hasBlurredRef.current = false
+        setHasBlurred(false)
+        formSubmittedRef.current = false
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -322,6 +340,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
         if (required && isEmpty) {
           setError('Missing phone number')
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           return 'Missing phone number'
         }
@@ -378,6 +397,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           // Set the error state so the validation attribute gets added
           setError(errorMessage)
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           setHasTyped(true)
 
@@ -401,6 +421,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     // Reset form submitted state when user types
     if (formSubmitted) {
+      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
 
@@ -416,11 +437,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiRef.current.isValidNumber())
+    
+    // Don't call isValid callback on change - only on blur or form submission
+    // This prevents triggering validation while typing
+    // Use refs to get current values in case this is called from event listener
+    if (hasBlurredRef.current || formSubmittedRef.current) {
+      isValid(itiRef.current.isValidNumber())
+    }
 
-    // Trigger validation after onChange for React Hook Form
-    // This ensures validation state is up-to-date
-    setTimeout(() => validateErrors(), 0)
+    // Don't validate on change - only validate on blur or form submission
   }
 
   // Separating Concerns as React Docs Recommend
@@ -482,7 +507,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           setSelectedData(phoneNumberData)
           onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
+          
+          // Don't call isValid callback on change - only on blur or form submission
+          // Use refs to check current blur state in the event listener (closure issue)
+          if (hasBlurredRef.current || formSubmittedRef.current) {
+            isValid(telInputInit.isValidNumber())
+          }
         })
       }
     }
@@ -492,12 +522,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error || displayError,
+    error: displayError || props.error || "",
     type: 'tel',
     id,
     label,
     name,
-    onBlur: validateErrors,
+    onBlur: () => {
+      hasBlurredRef.current = true
+      setHasBlurred(true)
+      validateErrors()
+    },
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,12 +1,42 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { 
+        id: "validation", 
+        initial_country: "af", 
+        value: "", 
+        required: true 
+    }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
-        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-        })
+        const form = document.querySelector('#example-form-validation');
+        
+        // Wait for React component to mount
+        function waitForComponent() {
+            const phoneInput = form.querySelector('#validation');
+            
+            if (!phoneInput) {
+                setTimeout(waitForComponent, 100);
+                return;
+            }
+            
+            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
+            setTimeout(function() {
+                phoneInput.focus({ preventScroll: true });
+                setTimeout(function() {
+                    phoneInput.blur();
+                }, 100);
+            }, 500);
+        }
+        
+        waitForComponent();
+        
+        // Prevent form submission if there are validation errors
+        form.addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
+                e.preventDefault();
+            }
+        });
     })
 <% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -10,8 +10,19 @@ const PhoneNumberInputValidation = (props) => {
     const [showFormErrors, setShowFormErrors] = useState(false);
     const [phoneNumber, setPhoneNumber] = useState("");
     const [countryCode, setCountryCode] = useState("af");
+    const [isValid, setIsValid] = useState(false);
+    const [hasInteracted, setHasInteracted] = useState(false);
+
+    // Start with initial error - will be cleared on blur if valid
+    const initialError = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    );
 
     const handleOnValidate = (valid) => {
+        setIsValid(valid);
+        setHasInteracted(true);
         setFormErrors(
             valid ? "" : "Please correct the fields below and try again."
         );
@@ -23,18 +34,16 @@ const PhoneNumberInputValidation = (props) => {
     };
     
     const handleOnSubmit = (e) => {
-        if (showFormErrors) e.preventDefault()
+        if (!isValid) e.preventDefault()
     }
 
     useEffect(() => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    const error = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    )
+    // Only show error prop initially, or if invalid after interaction
+    // Clear error prop once valid (component handles validation on blur)
+    const shouldShowError = !hasInteracted || (hasInteracted && !isValid);
 
     return (
         <form
@@ -50,7 +59,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={error}
+                error={shouldShowError ? initialError : undefined}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -1 +1 @@
-Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,6 +29,7 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
+  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -63,6 +64,7 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
+  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -94,14 +96,17 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectId = (inputOptions?.id as string) || name
+
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          {...inputOptions}
           disabled={disabled}
-          id={name}
+          id={selectId}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -125,7 +130,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={name}
+            htmlFor={selectId}
         >
           <Caption 
               dark={props.dark}
@@ -135,7 +140,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={name}
+          htmlFor={selectId}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

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

@@ -0,0 +1,16 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "favorite_food",
+  options: [
+    { value: "pizza", value_text: "Pizza" },
+    { value: "tacos", value_text: "Tacos" },
+    { value: "sushi", value_text: "Sushi" }
+  ],
+  input_options: {
+    'aria-label': "Select your favorite food",
+    class: "custom-select-class",
+    data: { controller: "search", action: "change->search#filter" },
+    id: "favorite-food-select"
+  }
+}) %>
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectInputOptions = (props) => {
+  const options = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'tacos', text: 'Tacos' },
+    { value: 'sushi', text: 'Sushi' },
+  ]
+
+  return (
+    <>
+      <Select
+          inputOptions={{
+            'aria-label': 'Select your favorite food',
+            className: 'custom-select-class',
+            id: 'favorite-food-select',
+          }}
+          label="Favorite Food"
+          name="favorite_food"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default SelectInputOptions
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -0,0 +1 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

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

@@ -15,6 +15,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
+  - select_input_options: Input Options
 
 
 
@@ -33,6 +34,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
+  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

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

@@ -12,3 +12,4 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
+export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,6 +14,8 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -38,7 +40,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes)
+        }.merge(attributes).merge(input_options)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,4 +65,27 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
+});
+
+test('inputOptions are passed to select element', () => {
+  render(
+    <Select
+        data={{ testid: testId }}
+        inputOptions={{
+          id: 'custom-select-id',
+          className: 'custom-select-class',
+          'aria-label': 'Custom aria label',
+        }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const selectElement = kit.querySelector('select')
+
+  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
+  expect(selectElement).toHaveClass('custom-select-class')
+  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,6 +8,25 @@
       border-right: 1px solid $border_light !important;
     }
 
+    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
+    .pb_advanced_table &,
+    &[data-vertical-border="true"] {
+      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
+      .table-header-cells:first-child,
+      .table-header-cells-custom:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
+      }
+
+      .pb_table_td:nth-child(2) {
+        box-shadow: none !important;
+      }
+    }
+    // --- End Advanced Table First Column Code Section ---
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -63,5 +82,35 @@
         }
       }
     }
+
+    // Dark mode support for advanced tables
+    .pb_advanced_table.dark & {
+      td, th, .pb_table_td, .pb_table_th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      thead tr th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      &[data-vertical-border="true"] {
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child {
+          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
+        }
+      }
+
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            border-right-color: darken($border_dark, 10%) !important;
+          }
+        }
+      }
+    }
+    // --- End Advanced Table Dark Mode Code Section ---
   }
 }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -276,3 +276,18 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
+test('input display none shows number of selected items', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-test')
+  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -43,6 +43,7 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -89,6 +90,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
+  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -238,6 +240,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
+    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,