feat(Dropdown): add inputValue and blurInputOnSelect properties to al…

…low editing options (#2608)
mondaycom · Nov 24, 2024 · 074c12c · 074c12c
1 parent dfd3777
commit 074c12c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -117,7 +117,9 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
       filterOption,
       menuPosition = Dropdown.menuPositions.ABSOLUTE,
       "data-testid": dataTestId,
-      withGroupDivider = false
+      withGroupDivider = false,
+      inputValue,
+      blurInputOnSelect
     }: DropdownComponentProps,
     ref: React.ForwardedRef<HTMLElement>
   ) => {
@@ -458,6 +460,8 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         loadingMessage={loadingMessage}
         tabSelectsValue={tabSelectsValue}
         filterOption={filterOption}
+        inputValue={inputValue}
+        blurInputOnSelect={blurInputOnSelect}
         {...asyncAdditions}
         {...additions}
       />

diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts
@@ -279,7 +279,14 @@ export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptio
    * createFilter function is available at Dropdown.createFilter
    */
   filterOption?: (option: DropdownOption, inputValue: string) => boolean;
-
+  /**
+   * The current value of the input field, used to control the current value of the input field programmatically
+   */
+  inputValue?: string;
+  /**
+   * If true, the input field will lose focus when an option is selected
+   */
+  blurInputOnSelect?: boolean;
   withReadOnlyStyle?: boolean;
   OptionRenderer?: React.ReactNode;
   menuIsOpen?: boolean;