@razorpay/blade 10.13.0 → 10.13.1

package/build/components/index.d.ts

@@ -5452,6 +5452,7 @@ declare const SelectInput: React__default.ForwardRefExoticComponent<(({
         name?: string | undefined;
         values: string[];
     }) => void) | undefined;
+    syncInputValueWithSelection?: ((value: string) => void) | undefined;
     maxRows?: "multiple" | "single" | "expandable" | undefined;
     labelPosition?: "left" | "top" | "inside-input" | undefined;
 }) & React__default.RefAttributes<BladeElementRef>>;
@@ -5510,6 +5511,7 @@ declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseIn
         name?: string | undefined;
         values: string[];
     }) => void) | undefined;
+    syncInputValueWithSelection?: ((value: string) => void) | undefined;
     maxRows?: "multiple" | "single" | "expandable" | undefined;
     labelPosition?: "left" | "top" | "inside-input" | undefined;
 } & {
@@ -5534,6 +5536,12 @@ declare type DropdownInputTriggersCommonProps = Pick<BaseInputProps, 'label' | '
         name?: string;
         values: string[];
     }) => void;
+    /**
+     * Syncs the selected value to inputValue in AutoComplete
+     *
+     * Only needed in single select AutoComplete because inputValue is expected to be same as selected value there
+     */
+    syncInputValueWithSelection?: (value: string) => void;
     /**
      * constraints the height of input to given number rows
      *

package/build/components/index.development.web.js

@@ -23674,6 +23674,12 @@ var useControlledDropdownInput = function useControlledDropdownInput(props) {
         setIsControlled(true);
       }
       selectValues(props.value);
+
+      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.
+      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {
+        var _props$syncInputValue;
+        (_props$syncInputValue = props.syncInputValueWithSelection) === null || _props$syncInputValue === void 0 ? void 0 : _props$syncInputValue.call(props, props.value);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value, options]);
@@ -23735,7 +23741,9 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
     onChange: props.onChange,
     name: props.name,
     value: props.value,
-    defaultValue: props.defaultValue
+    defaultValue: props.defaultValue,
+    syncInputValueWithSelection: props.syncInputValueWithSelection,
+    isSelectInput: props.isSelectInput
   });
   var getValue = function getValue() {
     var prefix = '';
@@ -24028,7 +24036,7 @@ var useAutoComplete = function useAutoComplete(_ref) {
       // eslint-disable-next-line no-lonely-if
       if (value && options && options.length > 0) {
         var filteredOptions = getOptionValues().filter(function (optionValue) {
-          return optionValue.toLowerCase().startsWith(value.toLowerCase());
+          return optionValue.toLowerCase().includes(value.toLowerCase());
         });
         setGlobalFilteredValues(filteredOptions);
       } else {
@@ -24138,6 +24146,17 @@ var _AutoComplete = function _AutoComplete(props, ref) {
       onChange: onSelectionChange,
       isSelectInput: false,
       inputValue: inputValue,
+      syncInputValueWithSelection: function syncInputValueWithSelection(value) {
+        var _selectedOption$title;
+        if (!value) {
+          setInputValue('');
+          return;
+        }
+        var selectedOption = options.find(function (option) {
+          return option.value === value;
+        });
+        setInputValue((_selectedOption$title = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.title) !== null && _selectedOption$title !== void 0 ? _selectedOption$title : '');
+      },
       onTriggerKeydown: onTriggerKeydown,
       onInputValueChange: onInputValueChange,
       onTriggerClick: function onTriggerClick(triggerEvent) {