@razorpay/blade 10.13.0 → 10.13.2

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

@@ -13653,7 +13653,8 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
 
   // When one item is selected, we display that item's title in input
   if (selectedIndices.length === 1) {
-    return options[selectedIndices[0]].title;
+    var _options$selectedIndi;
+    return (_options$selectedIndi = options[selectedIndices[0]]) === null || _options$selectedIndi === void 0 ? void 0 : _options$selectedIndi.title;
   }
 
   // When more than one item is selected, we display the count of items
@@ -23275,6 +23276,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]);
@@ -23336,7 +23343,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 = '';
@@ -23588,7 +23597,7 @@ var useAutoComplete = function useAutoComplete(_ref) {
       setActiveIndex(firstItemOptionIndex);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [globalFilteredValues.length]);
+  }, [globalFilteredValues.length, options.length]);
 
   // When input is empty or its single select, we want all items to be shown in filter on open of dropdown
   React__default.useEffect(function () {
@@ -23629,7 +23638,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 {
@@ -23739,6 +23748,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) {