Merge pull request #889 from ishpaul777/ishpaul/fix-combobox

Ishpaul/fix-combobox

Author: chiragsalian

lib/components/form/element/combobox.js

@@ -195,23 +195,39 @@ class Combobox extends React.Component {
 
     // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps) {
-        if (!nextProps.value || isEqual(nextProps.value, this.state.currentValue)) {
-            return;
+        if (nextProps.value && !isEqual(nextProps.value, this.state.currentValue)) {
+            this.setValue(nextProps.value);
         }
-        this.setValue(nextProps.value);
 
         if (nextProps.options !== undefined) {
             // If the options have an id property, we use that to compare them and determine if they changed, if not
             // we'll use the whole options array.
-            if (has(nextProps.options, '0.id')) {
-                if (
-                    nextProps.options.some((option, index) => !isEqual(option.id, this.props.options[index].id)) ||
-                    nextProps.alreadySelectedOptions.some((alreadySelectedOption, index) => !isEqual(alreadySelectedOption.id, this.props.alreadySelectedOptions[index].id))
-                ) {
+            const optionsChanged = has(nextProps.options, '0.id')
+                ? nextProps.options.some((option, index) => !isEqual(option.id, this.props.options[index] && this.props.options[index].id))
+                : !isEqual(nextProps.options, this.props.options);
+
+            // Check if alreadySelectedOptions changed - compare by id if available, otherwise by value or full comparison
+            const hasAlreadySelectedId = nextProps.alreadySelectedOptions && nextProps.alreadySelectedOptions.length > 0 && has(nextProps.alreadySelectedOptions[0], 'id');
+
+            const alreadySelectedChanged = hasAlreadySelectedId
+                ? nextProps.alreadySelectedOptions.length !== this.props.alreadySelectedOptions.length ||
+                  nextProps.alreadySelectedOptions.some((alreadySelectedOption, index) => {
+                      const prevOption = this.props.alreadySelectedOptions[index];
+                      return !prevOption || !isEqual(alreadySelectedOption.id, prevOption.id);
+                  })
+                : !isEqual(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions);
+
+            if (optionsChanged || alreadySelectedChanged) {
+                // If only alreadySelectedOptions changed and dropdown is open, just update options without resetting
+                if (!optionsChanged && alreadySelectedChanged && this.state.isDropdownOpen) {
+                    const {currentValue} = this.state;
+                    this.setState(() => ({
+                        options: this.getTruncatedOptions(currentValue, nextProps.alreadySelectedOptions),
+                    }));
+                } else {
+                    // Options changed or dropdown is closed - do full reset
                     this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
                 }
-            } else if (!isEqual(nextProps.options, this.props.options) || !isEqual(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions)) {
-                this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
             }
         }
 
@@ -484,12 +500,14 @@ class Combobox extends React.Component {
         // Get the divider index if we have one
         const findDivider = (option) => option.divider;
         const dividerIndex = this.options.findIndex(findDivider);
+
         // Split into two arrays everything before and after the divider (if the divider does not exist then we'll return a single array)
         const splitOptions = dividerIndex ? [this.options.slice(0, dividerIndex + 1), this.options.slice(dividerIndex + 1)] : [this.options];
 
-        const formatOption = (option) => ({
+        const formatOption = (option, index) => ({
             focused: false,
-            isSelected: option.selected && (isEqual(option.value, currentValue) || !!alreadySelected.find((item) => item.value === option.value)),
+            isSelected: (option.selected && isEqual(option.value, currentValue)) || !!alreadySelected.find((item) => item.value === option.value),
+            originalIndex: index, // Added for stable sorting
             ...option,
         });
 
@@ -498,18 +516,29 @@ class Combobox extends React.Component {
             if (o.showLast) {
                 return 2;
             }
-
             return o.isSelected && this.props.alwaysShowSelectedOnTop ? 0 : 1;
         };
 
         // Take each array and format it, sort it, and move selected items to top (if applicable)
-        const formatOptions = (array) =>
-            array
-                .map(formatOption)
-                .sort((a, b) => sortByOption(a) - sortByOption(b))
+        const formatOptions = (array, arrayStartIndex) => {
+            return array
+                .map((option, index) => formatOption(option, arrayStartIndex + index))
+                .sort((a, b) => {
+                    const sortDiff = sortByOption(a) - sortByOption(b);
+                    // If sort priority is the same, preserve original order using originalIndex
+                    return sortDiff !== 0 ? sortDiff : a.originalIndex - b.originalIndex;
+                })
                 .slice(0, this.props.maxItemsToShow);
+        };
 
-        const truncatedOptions = splitOptions.map(formatOptions).flat();
+        let cumulativeIndex = 0;
+        const truncatedOptions = splitOptions
+            .map((array) => {
+                const result = formatOptions(array, cumulativeIndex);
+                cumulativeIndex += array.length;
+                return result;
+            })
+            .flat();
 
         if (!truncatedOptions.length) {
             truncatedOptions.push({