4259 Fix option not being rebuild after isOptionDisabled prop changes

packages/react-select/src/Select.js

@@ -56,6 +56,7 @@ import type {
   FocusEventHandler,
   GroupType,
   InputActionMeta,
+  isOptionDisabledType,
   KeyboardEventHandler,
   MenuPlacement,
   MenuPosition,
@@ -163,7 +164,7 @@ export type Props = {
 
     An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
   */
-  isOptionDisabled: (OptionType, OptionsType) => boolean | false,
+  isOptionDisabled: isOptionDisabledType,
   /* Override the built-in logic to detect whether an option is selected */
   isOptionSelected?: (OptionType, OptionsType) => boolean,
   /* Support multiple selected options */
@@ -379,7 +380,14 @@ export default class Select extends Component<Props, State> {
         return (
           newSelectValue === lastSelectValue &&
           newProps.inputValue === lastProps.inputValue &&
-          newProps.options === lastProps.options
+          newProps.options === lastProps.options &&
+          newProps.isOptionDisabled === lastProps.isOptionDisabled &&
+          newProps.isOptionSelected === lastProps.isOptionSelected &&
+          newProps.getOptionLabel === lastProps.getOptionLabel &&
+          newProps.getOptionValue === lastProps.getOptionValue &&
+          newProps.blurInputOnSelect === lastProps.blurInputOnSelect &&
+          newProps.hideSelectedOptions === lastProps.hideSelectedOptions &&
+          newProps.filterOption === lastProps.filterOption
         );
       }
     ).bind(this);
@@ -667,7 +675,13 @@ export default class Select extends Component<Props, State> {
           context: { value: this.getOptionLabel(newValue) },
         });
       } else {
-        if (!this.isOptionDisabled(newValue, selectValue)) {
+        if (
+          !this.isOptionDisabled(
+            newValue,
+            selectValue,
+            this.props.isOptionDisabled
+          )
+        ) {
           this.setValue([...selectValue, newValue], 'select-option', newValue);
           this.announceAriaLiveSelection({
             event: 'select-option',
@@ -682,7 +696,13 @@ export default class Select extends Component<Props, State> {
         }
       }
     } else {
-      if (!this.isOptionDisabled(newValue, selectValue)) {
+      if (
+        !this.isOptionDisabled(
+          newValue,
+          selectValue,
+          this.props.isOptionDisabled
+        )
+      ) {
         this.setValue(newValue, 'select-option');
         this.announceAriaLiveSelection({
           event: 'select-option',
@@ -896,9 +916,13 @@ export default class Select extends Component<Props, State> {
 
     return isClearable;
   }
-  isOptionDisabled(option: OptionType, selectValue: OptionsType): boolean {
-    return typeof this.props.isOptionDisabled === 'function'
-      ? this.props.isOptionDisabled(option, selectValue)
+  isOptionDisabled(
+    option: OptionType,
+    selectValue: OptionsType,
+    isOptionDisabledFunc: isOptionDisabledType
+  ): boolean {
+    return typeof isOptionDisabledFunc === 'function'
+      ? isOptionDisabledFunc(option, selectValue)
       : false;
   }
   isOptionSelected(option: OptionType, selectValue: OptionsType): boolean {
@@ -1327,7 +1351,11 @@ export default class Select extends Component<Props, State> {
     const { inputValue = '', options } = props;
 
     const toOption = (option, id) => {
-      const isDisabled = this.isOptionDisabled(option, selectValue);
+      const isDisabled = this.isOptionDisabled(
+        option,
+        selectValue,
+        props.isOptionDisabled
+      );
       const isSelected = this.isOptionSelected(option, selectValue);
       const label = this.getOptionLabel(option);
       const value = this.getOptionValue(option);

packages/react-select/src/__tests__/Select.test.js

@@ -629,7 +629,6 @@ cases(
       menuIsOpen: true,
       hideSelectedOptions: false,
       isMulti: true,
-      menuIsOpen: true,
     };
     let { container } = render(<Select {...props} />);
 
@@ -1432,6 +1431,39 @@ cases(
   }
 );
 
+test('should rebuild menu options if different isOptionDisabled prop is passed', () => {
+  const optionIsEnabledFunc = () => false;
+  const optionIsDisabledFunc = () => true;
+
+  const { container, rerender } = render(
+    <Select
+      {...BASIC_PROPS}
+      menuIsOpen
+      isOptionDisabled={optionIsEnabledFunc}
+    />
+  );
+  const enabledOptionsValues = [
+    ...container.querySelectorAll('.react-select__option'),
+  ].filter(n => !n.classList.contains('react-select__option--is-disabled'));
+
+  expect(enabledOptionsValues.length).toEqual(OPTIONS.length);
+
+  rerender(<Select {...BASIC_PROPS} isOptionDisabled={optionIsEnabledFunc} />);
+  rerender(
+    <Select
+      {...BASIC_PROPS}
+      menuIsOpen
+      isOptionDisabled={optionIsDisabledFunc}
+    />
+  );
+
+  const enabledOptionsValuesAfterPropChange = [
+    ...container.querySelectorAll('.react-select__option'),
+  ].filter(n => !n.classList.contains('react-select__option--is-disabled'));
+
+  expect(enabledOptionsValuesAfterPropChange.length).toEqual(0);
+});
+
 cases(
   'isDisabled prop',
   ({ props }) => {

packages/react-select/src/types.js

@@ -120,3 +120,5 @@ export type OptionProps = PropsWithInnerRef & {
   onMouseOver: MouseEventHandler,
   value: any,
 };
+
+export type isOptionDisabledType = (OptionType, OptionsType) => boolean;