playbook_ui 18.2.0 → 18.3.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5ac75f8f899c8e692ebc15d9e4c233540f1b055707c362099ca5f6bd23da085
-  data.tar.gz: 96f74ff346de6735599cbd46bf9d8b81e541b7ad7b258275e4174a922fe637ac
+  metadata.gz: dce454b27ec0be36f4812b6955579e934aa2d63d856a62d796e7ef64b05b0a94
+  data.tar.gz: 56f6845557ded84094f8757e2a29f3151a03407430f478ad6570aaf8dca25e93
 SHA512:
-  metadata.gz: c8dc8cf0775094f3d738ff9fdb1bc5a7101d9f950c6503dd75c598da03e0a4353d9466a864947fbc905a42997a60f3e8ee29569179106b9c8fc796feb2fe6819
-  data.tar.gz: 119a30f2687af34eb8bfbc1c942182d128838437cb8c15f71a061600892d9fe5498fe400db526ee306120e4b90f220d0f97bb1467e829191e6b5fe9c35a09eaf
+  metadata.gz: 259f6127136c2e6f3d26b5eb90e32c641c357792c0ff0dfefe5ba8e98dc808f41a55451456c39c6fa228dae125d8aa3d17296090b65d5d1be1065cd0ef7fd55c
+  data.tar.gz: 6476556760b7bf8c5f11852974131592ffe329f86beb23fcdbb81103699f94af9d982ad47daa8537a3334d46601ca522ff34c25403406061cebd82f565e4a4bf

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -12,8 +12,10 @@ import DropdownContainer from "./subcomponents/DropdownContainer";
 import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
+import DropdownFormFields from "./subcomponents/DropdownFormFields";
 import useDropdown from "./hooks/useDropdown";
 import useAsyncOptions, { LoadOptions } from "./hooks/useAsyncOptions";
+import { getCreationOption, matchesOptionExactly } from "./utilities/optionCreation";
 import getQuickPickOptions from "./quickpick";
 
 import {
@@ -99,6 +101,7 @@ type CustomQuickPickDates = {
 type InputChangeReason = "input" | "clear";
 
 type DropdownProps = {
+    allowOptionCreation?: boolean;
     aria?: { [key: string]: string };
     async?: boolean;
     loadOptions?: LoadOptions;
@@ -122,6 +125,7 @@ type DropdownProps = {
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
     error?: string;
+    enableFormSupport?: boolean;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
     isClosed?: boolean;
@@ -143,6 +147,8 @@ type DropdownProps = {
       fontColor?: string;
     };
     requiredIndicator?: boolean;
+    required?: boolean;
+    validationMessage?: string;
 };
 
 interface DropdownComponent
@@ -154,6 +160,7 @@ interface DropdownComponent
 
 let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const {
+        allowOptionCreation = false,
         aria = {},
         async = false,
         loadOptions,
@@ -163,7 +170,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onInputChange,
         renderOption,
         value,
-        autocomplete = false,
+        autocomplete: autocompleteProp = false,
         blankSelection = '',
         children,
         className,
@@ -175,7 +182,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         data = {},
         defaultValue = {},
         disabled = false,
-        error,
+        error: errorProp,
+        enableFormSupport = false,
         htmlOptions = {},
         id,
         isClosed = true,
@@ -194,9 +202,18 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         separators = true,
         variant = "default",
         activeStyle,
-        requiredIndicator = false
+        requiredIndicator = false,
+        required = false,
+        validationMessage = "Please fill out this field."
     } = props;
 
+    const creationEnabled = allowOptionCreation && variant !== "quickpick";
+    const autocomplete = autocompleteProp || creationEnabled;
+
+    const [formInvalid, setFormInvalid] = useState(false);
+    const formError = formInvalid ? validationMessage : "";
+    const error = enableFormSupport ? errorProp || formError : errorProp;
+
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
@@ -365,6 +382,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     ? [selected]
     : [];
 
+    const hasFormSelection = enableFormSupport && selectedArray.some((option) => String(option.id ?? option.value ?? "") !== "");
+    useEffect(() => {
+        if (!enableFormSupport || hasFormSelection || !required) setFormInvalid(false);
+    }, [enableFormSupport, hasFormSelection, required]);
+
     const selectedOptionIds = useMemo(() => (
       multiSelect && getOptionValue
         ? new Set(selectedArray.map((option) => String(getOptionValue(option))))
@@ -415,7 +437,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => isSameOption(sel, option)));
     }, [optionsWithBlankSelection, selectedArray, multiSelect, isSameOption, selectedOptionIds, getOptionValue]);
     
-    const filteredOptions = useMemo(() => {
+    const searchIsPending = loading || (asyncEnabled && asyncStatus === "loading");
+    const searchFailed = asyncEnabled && asyncStatus === "error";
+    const canCreateOption = creationEnabled && !disabled && !searchIsPending && !searchFailed;
+    let creationOption: GenericObject | null = null;
+    if (canCreateOption) {
+        const existingOptions = Array.isArray(dropdownOptions) ? dropdownOptions : [];
+        creationOption = getCreationOption(filterItem, [...existingOptions, ...selectedArray]);
+    }
+
+    const matchingOptions = useMemo(() => {
           const selectedLabel =
             !multiSelect &&
             !Array.isArray(selected) &&
@@ -431,9 +462,29 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
           const filterText =
             selectedLabel && filterItem === selectedLabel ? "" : filterItem;
           return availableOptions.filter((opt: GenericObject) =>
-            String(opt.label).toLowerCase().includes(filterText.toLowerCase())
+            String(opt.label).toLowerCase().includes(filterText.toLowerCase()) ||
+            (creationEnabled && matchesOptionExactly(opt, filterText))
           );
-        }, [availableOptions, filterItem, multiSelect, selected, asyncEnabled, autocomplete]);
+        }, [availableOptions, filterItem, multiSelect, selected, asyncEnabled, autocomplete, creationEnabled]);
+
+    const filteredOptions = creationOption ? [...matchingOptions, creationOption] : matchingOptions;
+    const inputShowsSelection = !multiSelect && !Array.isArray(selected) && filterItem === selected?.label;
+    let creationFocusIndex = -1;
+    if (creationEnabled && creationOption) {
+        creationFocusIndex = matchingOptions.length;
+    } else if (creationEnabled) {
+        creationFocusIndex = matchingOptions.findIndex((option: GenericObject) => !option.disabled);
+    }
+
+    useEffect(() => {
+        if (!creationEnabled) return;
+        if (isDropDownClosed || !filterItem.trim() || inputShowsSelection) {
+            setFocusedOptionIndex(-1);
+            return;
+        }
+
+        setFocusedOptionIndex(creationFocusIndex);
+    }, [creationEnabled, isDropDownClosed, filterItem, inputShowsSelection, creationFocusIndex]);
 
     // Empty copy follows the settled search. Hiding already-selected rows must not turn a
     // successful result list into "No results found", including the last pick while the menu stays open.
@@ -441,18 +492,25 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         ? noOptionsText || "No results found"
         : "";
 
+    let asyncStatusText = "";
+    if (asyncEnabled) {
+        if (searchIsPending) asyncStatusText = "Loading…";
+        else if (searchFailed) asyncStatusText = "Unable to load options";
+        else if (!creationOption) asyncStatusText = asyncEmptyCopy;
+    }
+
     // A keystroke clears the highlight. Focus the first result once the next list arrives,
     // including options the application loads itself.
     const asyncResultOptions = loadOptions ? loadedOptions : options;
     useEffect(() => {
-        if (asyncEnabled && !isDropDownClosed) {
+        if (!creationEnabled && asyncEnabled && !isDropDownClosed) {
             setFocusedOptionIndex(filteredOptions.length ? 0 : -1);
         }
-    }, [asyncResultOptions]);
+    }, [asyncResultOptions, creationEnabled]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
-        if (!isDropDownClosed) {
+        if (!creationEnabled && !isDropDownClosed) {
             let newIndex = 0;
             if (selected && !Array.isArray(selected) && selected.label) {
                 const selectedIndex = filteredOptions.findIndex((option: GenericObject) => isSameOption(option, selected));
@@ -462,7 +520,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             }
             setFocusedOptionIndex(newIndex);
         }
-    }, [isDropDownClosed]);
+    }, [isDropDownClosed, creationEnabled]);
 
     // Auto-position dropdown above/below based on available space or fixed/absolute when portaled to body / floating root
     useLayoutEffect(() => {
@@ -580,10 +638,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    }
                } else {
                    setSelected(clickedItem);
-                   // Async autocomplete shows the selection in the input, as controlled mode and Rails do
-                   setFilterItem(isControlled && autocomplete
-                     ? (selected as GenericObject)?.label || ""
-                     : asyncEnabled && autocomplete ? clickedItem.label || "" : "");
+                   // Plain uncontrolled autocomplete clears its query after selection.
+                   const keepSelectedLabel = autocomplete && (creationEnabled || asyncEnabled || isControlled);
+                   const nextQuery = keepSelectedLabel
+                     ? (isControlled ? (selected as GenericObject)?.label : clickedItem.label) || ""
+                     : "";
+                   setFilterItem(nextQuery);
                    if (shouldCloseOnClick) {
                        setIsDropDownClosed(true);
                    }
@@ -724,6 +784,27 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       }
     }, [variant, initialSelected, controlsStartId, controlsEndId]);
 
+    const handleFormInvalid = () => {
+        setFormInvalid(true);
+        const focusTarget = inputRef.current || inputWrapperRef.current;
+        focusTarget?.focus();
+    };
+
+    const handleFormReset = () => {
+        const hasDefaultSelection = Object.keys(initialSelected).length > 0;
+        const resetValue = multiSelect || hasDefaultSelection ? initialSelected : null;
+        const resetQuery = autocomplete && !multiSelect
+            ? (initialSelected as GenericObject).label || ""
+            : "";
+
+        setSelected(initialSelected);
+        handleSelectionChange(resetValue);
+        setFilterItem(resetQuery);
+        setFormInvalid(false);
+        setIsDropDownClosed(true);
+        if (asyncEnabled) clearAsync();
+    };
+
     return (
         <div {...ariaProps}
             {...dataProps}
@@ -738,7 +819,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     asyncEnabled,
-                    asyncStatus: asyncEnabled ? (loading || asyncStatus === "loading" ? "Loading…" : asyncStatus === "error" ? "Unable to load options" : asyncEmptyCopy) : "",
+                    asyncStatus: asyncStatusText,
+                    creationEnabled,
+                    creationOption,
                     renderOption,
                     optionKey,
                     isControlled,
@@ -785,6 +868,18 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
+                {enableFormSupport && (
+                    <DropdownFormFields
+                        disabled={disabled}
+                        multiSelect={multiSelect}
+                        name={name}
+                        onInvalid={handleFormInvalid}
+                        onReset={handleFormReset}
+                        required={required}
+                        selected={selectedArray}
+                        validationMessage={validationMessage}
+                    />
+                )}
                 {label && (
                   <label
                       data-dropdown="pb-dropdown-label"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_form.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import Dropdown from '../_dropdown'
+import Button from '../../pb_button/_button'
+import Body from '../../pb_body/_body'
+
+const DropdownForm = () => {
+  const [submittedTags, setSubmittedTags] = useState(null)
+  const options = [
+    { id: 'product', label: 'Product', value: 'product' },
+    { id: 'support', label: 'Support', value: 'support' },
+  ]
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    setSubmittedTags(new FormData(event.currentTarget).getAll('tags[]'))
+  }
+
+  return (
+    <form onReset={() => setSubmittedTags(null)}
+        onSubmit={handleSubmit}
+    >
+      <Dropdown
+          enableFormSupport
+          label="Tags"
+          marginBottom="md"
+          multiSelect
+          name="tags[]"
+          options={options}
+          required
+          requiredIndicator
+          validationMessage="Select at least one tag."
+      />
+      <Button htmlType="submit"
+          text="Submit"
+      />
+      <Button htmlType="reset"
+          marginLeft="xs"
+          text="Reset"
+          variant="secondary"
+      />
+      {submittedTags && (
+        <Body marginTop="sm"
+            text={`Submitted tags: ${submittedTags.join(', ')}`}
+        />
+      )}
+    </form>
+  )
+}
+
+export default DropdownForm

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_form_react.md

@@ -0,0 +1,9 @@
+Set `enableFormSupport` to opt into React native form submission, required validation, and reset handling. The prop defaults to `false`. Passing `name` or `required` alone does not enable native form behavior. Option creation is a separate feature controlled by `allowOptionCreation`.
+
+With `enableFormSupport` enabled and `name` provided, Dropdown renders named hidden inputs. Each selected option submits its `id`, falling back to `value`. For `multiSelect`, each selection gets a separate input and the name ends in `[]`; an existing `[]` suffix is preserved. Disabled Dropdowns do not submit values. An empty selection submits an empty string.
+
+The example below requires at least one tag. Submit an empty selection to see validation, select tags and submit to see the values from `FormData`, or use Reset to restore the default selection.
+
+Use `required` for native form constraint validation, `validationMessage` for the inline required message, and `requiredIndicator` for the visual asterisk. Invalid submissions focus the trigger or autocomplete input. Typing a query does not satisfy required validation; select an option first. The unnamed validation input never submits query text.
+
+Native form reset restores `defaultValue`, clears the query and validation message, and closes the menu. A controlled Dropdown reports that reset through its normal selection callbacks; the parent must update `value`. Canceling the reset event preserves the selection. In a controlled form library, pass `value`, `name`, and `onChange`; Dropdown sends `{ target: { name, value } }`, with an option object or array as `value`. The forwarded ref exposes `clearSelected`, rather than a native input ref.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_option_creation.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("dropdown", props: {
+  allow_option_creation: true,
+  label: "Grid Alignment Group",
+  margin_bottom: "md",
+  name: "grid_alignment_group",
+  options: [{ id: "existing", label: "Existing group", value: "existing" }],
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  allow_option_creation: true,
+  label: "Home IDs",
+  multi_select: true,
+  name: "home_ids[]",
+  options: [{ id: "existing", label: "Existing group", value: "existing" }],
+  placeholder: "Type a home ID and press Enter",
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_option_creation.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownOptionCreation = () => {
+  const options = [{ id: 'existing', label: 'Existing tag', value: 'existing' }]
+
+  return (
+    <>
+      <Dropdown
+          allowOptionCreation
+          label="Grid Alignment Group"
+          marginBottom="md"
+          name="gridAlignmentGroup"
+          options={options}
+      />
+      <Dropdown
+          allowOptionCreation
+          label="Tags"
+          multiSelect
+          name="tags[]"
+          options={options}
+      />
+    </>
+  )
+}
+
+export default DropdownOptionCreation

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_option_creation_rails.md

@@ -0,0 +1,9 @@
+Enable `allow_option_creation: true` to select text that is not already an option. This also enables autocomplete on the default trigger. With custom subcomponents, provide an autocomplete trigger or a searchable container. Creation supports single and multiple selections, including async search, and is ignored for the quickpick variant.
+
+Type a new value and click the `Create "…"` row, or use the arrow keys and Enter. A non-empty search focuses the Create row when it is available; arrow keys can choose another option. Creation trims surrounding whitespace, rejects blank text, and suppresses case-insensitive matches against existing or selected labels, values, and IDs. An exact ID or value match keeps the existing option visible and selectable even when its label does not contain the query. The selected object is `{ id: text, label: text, value: text, __isNew__: true }`. The Create label is presentation only.
+
+Created selections emit the normal `pb:dropdown:selected` event with the option object, or an array for `multi_select: true`. Rails retains its existing native form support. Multi-select fields submit individual selected values in selection order, and the field name receives a `[]` suffix only if it does not already have one. While selections exist, the empty base input is disabled so it does not add a blank array entry. Clearing the selection restores the base input for required validation; disabled Dropdowns stay excluded from submission.
+
+For async usage, combine `allow_option_creation: true` with `async: true` and handle the existing `pb:dropdown:search` event using its `setResults` and `setError` callbacks. Creation is hidden during pending searches and errors, then offered when settled results have no exact match. Creation can be offered below `search_term_minimum_length`, when no remote search runs.
+
+Creation does not persist a server record or append to application-owned options; persist selections through your normal form submission or selection handler.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_option_creation_react.md

@@ -0,0 +1,9 @@
+Enable `allowOptionCreation` to select text that is not already an option. This also enables autocomplete on the default trigger. Creation supports single and multiple selections, including async search, and is ignored for the quickpick variant.
+
+Type a new value and click the `Create "…"` row, or use the arrow keys and Enter. Creation trims surrounding whitespace, rejects blank text, and suppresses case-insensitive matches against existing or selected labels, values, and IDs. An exact ID or value match keeps the existing option visible and selectable even when its label does not contain the query. The selected object is `{ id: text, label: text, value: text, __isNew__: true }`. The Create label is presentation only.
+
+Created selections use the normal `onSelect(optionOrArray)` and `onChange({ target: { name, value } })` callbacks. Multiple selections produce an array of option objects. Native form submission additionally requires `enableFormSupport`; option creation alone does not enable it. Creation does not persist a server record or append to application-owned options; persist selections through your normal form submission or selection handler.
+
+For async usage, combine `allowOptionCreation` with `async` and your existing `loadOptions`; both Promise and callback loaders are supported. Creation is hidden during pending searches and errors, then offered when settled results have no exact match. Applications that manage fetching themselves must pass `loading` while the request is pending.
+
+A non-empty search focuses the Create row when it is available; arrow keys can choose another option. Closing the menu or clearing the query removes automatic option focus. Enter selects a highlighted option, including when the query is blank. Enter with a closed menu, or a blank query and no highlighted option, remains available for normal form submission and does not change the selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json

@@ -5,6 +5,7 @@
     "options": "Options.data"
   },
   "defaults": {
+    "allowOptionCreation": false,
     "async": false,
     "autocomplete": false,
     "blankSelection": "",
@@ -19,6 +20,8 @@
     "controlsStartId": "",
     "controlsEndId": "",
     "requiredIndicator": false,
+    "required": false,
+    "validationMessage": "",
     "dark": false,
     "label": "Select a Country",
     "options": [
@@ -124,7 +127,11 @@
         "closeOnClick",
         "constrainHeight",
         "isClosed",
-        "requiredIndicator"
+        "enableFormSupport",
+        "requiredIndicator",
+        "required",
+        "validationMessage",
+        "allowOptionCreation"
       ]
     },
     {
@@ -155,6 +162,15 @@
     }
   ],
   "presets": [
+    {
+      "name": "Create tags",
+      "props": {
+        "allowOptionCreation": true,
+        "multiSelect": true,
+        "name": "tags[]",
+        "label": "Tags"
+      }
+    },
     {
       "name": "Async search",
       "structureMode": "async",

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json

@@ -198,7 +198,11 @@
         "closeOnClick",
         "constrainHeight",
         "isClosed",
-        "requiredIndicator"
+        "enableFormSupport",
+        "requiredIndicator",
+        "required",
+        "validationMessage",
+        "allowOptionCreation"
       ]
     },
     {
@@ -226,6 +230,7 @@
     }
   ],
   "presets": [
+    { "name": "Create tags", "props": { "allowOptionCreation": true, "multiSelect": true, "name": "tags[]", "label": "Tags" } },
     {
       "name": "Async search",
       "structureMode": "async",

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

@@ -47,6 +47,7 @@ examples:
   - dropdown_async_search: Async Search
   - dropdown_async_multi_select_rails: Async Multi Select
   - dropdown_async_custom_content: Async Search with Custom Content
+  - dropdown_option_creation: Allow Option Creation
 
   react:
   - dropdown_default: Default
@@ -100,4 +101,6 @@ examples:
   - dropdown_async_rich_results: Async Search with Custom Content
   - dropdown_async_initial_options: Async Initial Results and Caching
   - dropdown_external_search: External Search
+  - dropdown_option_creation: Allow Option Creation
+  - dropdown_form: Enable Form Support
 

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

@@ -47,5 +47,7 @@ export { default as DropdownAsyncMultiSelect } from './_dropdown_async_multi_sel
 export { default as DropdownAsyncRichResults } from './_dropdown_async_rich_results.jsx'
 export { default as DropdownAsyncInitialOptions } from './_dropdown_async_initial_options.jsx'
 export { default as DropdownExternalSearch } from './_dropdown_external_search.jsx'
+export { default as DropdownForm } from "./_dropdown_form.jsx"
+export { default as DropdownOptionCreation } from "./_dropdown_option_creation.jsx"
 export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
-export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'
+export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'

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

@@ -19,7 +19,7 @@
             data-message="<%= object.validation_message %>"
             <% end %>
             data-dropdown-selected-option
-            name="<%= object.name %><%= '[]' if object.multi_select %>"
+            name="<%= object.input_name %>"
             style="display: none"
             <%= object.disabled ? "disabled" : ""%>
             <%= object.required ? "required" : ""%>
@@ -34,7 +34,7 @@
                 <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
             <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete_enabled?, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled, no_options_text: object.no_options_text }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>

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

@@ -29,6 +29,8 @@ module Playbook
                         default: true
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
+      prop :allow_option_creation, type: Playbook::Props::Boolean,
+                                   default: false
       prop :async, type: Playbook::Props::Boolean, default: false
       prop :active_style, type: Playbook::Props::HashProp,
                           default: {}
@@ -80,6 +82,7 @@ module Playbook
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_async: async ? true : nil,
+          pb_dropdown_allow_option_creation: allow_option_creation && variant != "quickpick" ? true : nil,
           pb_dropdown_active_style: active_style.present? ? active_style.to_json : nil,
           pb_dropdown_default_value: async && default_value.present? ? default_value.to_json : nil,
           pb_dropdown_search_term_minimum_length: async ? search_term_minimum_length : nil,
@@ -113,6 +116,17 @@ module Playbook
         id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
       end
 
+      def autocomplete_enabled?
+        autocomplete || (allow_option_creation && variant != "quickpick")
+      end
+
+      def input_name
+        return name unless multi_select
+        return name if name.present? && name.end_with?("[]")
+
+        "#{name}[]"
+      end
+
       def error_id
         error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
       end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -2387,6 +2387,45 @@ describe('async Dropdown empty menu', () => {
 });
 
 
+describe('autocomplete query after selection', () => {
+  test.each([undefined, false])('plain uncontrolled autocomplete clears with allowOptionCreation=%s', (allowOptionCreation) => {
+    const onSelect = jest.fn();
+    render(<Dropdown allowOptionCreation={allowOptionCreation}
+        autocomplete
+        onSelect={onSelect}
+        options={options}
+           />);
+    const input = screen.getByRole('textbox');
+    fireEvent.click(input);
+    fireEvent.change(input, { target: { value: 'Can' } });
+    fireEvent.click(screen.getByText('Canada'));
+
+    expect(input).toHaveValue('');
+    expect(onSelect).toHaveBeenCalledWith(options[1]);
+  });
+
+  test.each(['creation', 'async', 'controlled'])('%s autocomplete retains the selected label', (mode) => {
+    const Example = () => {
+      const [value, setValue] = useState(null);
+      return (
+        <Dropdown allowOptionCreation={mode === 'creation'}
+            async={mode === 'async'}
+            autocomplete
+            onSelect={setValue}
+            options={options}
+            {...(mode === 'controlled' ? { value } : {})}
+        />
+      );
+    };
+    render(<Example />);
+    const input = screen.getByRole('textbox');
+    fireEvent.click(input);
+    fireEvent.change(input, { target: { value: 'Can' } });
+    fireEvent.click(screen.getByText('Canada'));
+    expect(input).toHaveValue('Canada');
+  });
+});
+
 describe('autocomplete selection replacement', () => {
   beforeEach(() => jest.useFakeTimers());
   afterEach(() => { jest.clearAllTimers(); jest.useRealTimers(); });