From 24bbb052faef9ce4ead5e1c4eb2f6f53bfa011a5 Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Fri, 23 Aug 2024 18:18:26 +0200
Subject: [PATCH] fix(Select): pass disabled prop to renderControl, don't
 change state if disabled (#1766)

---
 src/components/Select/Select.tsx                     |  1 +
 src/components/Select/__stories__/SelectShowcase.tsx |  6 ++++--
 src/components/Select/__stories__/constants.ts       |  6 ++++--
 .../components/SelectControl/SelectControl.tsx       |  1 +
 src/components/Select/types.ts                       |  1 +
 src/hooks/useSelect/types.ts                         |  1 +
 src/hooks/useSelect/useSelect.ts                     | 12 +++++++++++-
 7 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 3517f5e0b1..3cad976d43 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -129,6 +129,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         open: propsOpen,
         onClose,
         onOpenChange,
+        disabled,
     });
 
     React.useEffect(() => {
diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
index b4bb839588..9c74af8587 100644
--- a/src/components/Select/__stories__/SelectShowcase.tsx
+++ b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -266,12 +266,13 @@ export const SelectShowcase = (props: SelectProps) => {
                 selectProps={{
                     ...props,
                     className: b('user-control'),
-                    renderControl: ({onClick, onKeyDown, ref, renderClear}) => {
+                    renderControl: ({onClick, onKeyDown, ref, renderClear, disabled}) => {
                         return (
                             <Button
                                 ref={ref}
                                 view="action"
                                 onClick={onClick}
+                                disabled={disabled}
                                 extraProps={{
                                     onKeyDown,
                                 }}
@@ -300,12 +301,13 @@ export const SelectShowcase = (props: SelectProps) => {
                     ...props,
                     className: b('user-control-placement'),
                     popupPlacement: ['bottom'],
-                    renderControl: ({onClick, onKeyDown, ref}) => {
+                    renderControl: ({onClick, onKeyDown, ref, disabled}) => {
                         return (
                             <Button
                                 ref={ref}
                                 view="action"
                                 onClick={onClick}
+                                disabled={disabled}
                                 extraProps={{
                                     onKeyDown,
                                     'aria-label': 'Add',
diff --git a/src/components/Select/__stories__/constants.ts b/src/components/Select/__stories__/constants.ts
index 94f495b465..2096005b44 100644
--- a/src/components/Select/__stories__/constants.ts
+++ b/src/components/Select/__stories__/constants.ts
@@ -144,12 +144,13 @@ export const EXAMPLE_USER_CONTROL = `const [value, setValue] = React.useState<st
 
 <Select
     value={value}
-    renderControl={({onClick, onKeyDown, ref, renderClear}) => {
+    renderControl={({onClick, onKeyDown, ref, renderClear, disabled}) => {
         return (
             <Button
                 ref={ref}
                 view="action"
                 onClick={onClick}
+                disabled={disabled}
                 extraProps={{
                     onKeyDown,
                 }}
@@ -175,12 +176,13 @@ export const EXAMPLE_USER_CONTROL_WITH_PLACEMENT = `const [value, setValue] = Re
 <Select
     value={value}
     popupPlacement={['bottom']}
-    renderControl={({onClick, onKeyDown, ref}) => {
+    renderControl={({onClick, onKeyDown, ref, disabled}) => {
         return (
             <Button
                 ref={ref}
                 view="action"
                 onClick={onClick}
+                disabled={disabled}
                 extraProps={{
                     onKeyDown,
                 }}
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index d7e0f5248e..05be5a859f 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -164,6 +164,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                 popupId,
                 selectId,
                 activeIndex,
+                disabled,
             },
             {value},
         );
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 0cb6553d2f..b9a77a7be0 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -22,6 +22,7 @@ export type SelectRenderControlProps = {
     popupId: string;
     selectId: string;
     activeIndex?: number;
+    disabled?: boolean;
 };
 export type SelectRenderControlOptions = {
     value: SelectProps['value'];
diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts
index 6024ab286e..9e7b203514 100644
--- a/src/hooks/useSelect/types.ts
+++ b/src/hooks/useSelect/types.ts
@@ -12,6 +12,7 @@ export type UseSelectProps = {
     defaultValue?: string[];
     multiple?: boolean;
     onUpdate?: (value: string[]) => void;
+    disabled?: boolean;
 } & UseOpenProps;
 
 export type UseSelectResult<T> = {
diff --git a/src/hooks/useSelect/useSelect.ts b/src/hooks/useSelect/useSelect.ts
index 0b7d62658f..cce9826692 100644
--- a/src/hooks/useSelect/useSelect.ts
+++ b/src/hooks/useSelect/useSelect.ts
@@ -14,8 +14,9 @@ export const useSelect = <T extends unknown>({
     defaultValue = [],
     multiple,
     onUpdate,
+    disabled,
 }: UseSelectProps): UseSelectResult<T> => {
-    const [value, setValue] = useControlledState(valueProps, defaultValue, onUpdate);
+    const [value, setValueInner] = useControlledState(valueProps, defaultValue, onUpdate);
     const [activeIndex, setActiveIndex] = React.useState<number>();
     const {toggleOpen, ...openState} = useOpenState({
         defaultOpen,
@@ -24,6 +25,15 @@ export const useSelect = <T extends unknown>({
         open,
     });
 
+    const setValue = React.useCallback(
+        (v: string[]) => {
+            if (!disabled) {
+                setValueInner(v);
+            }
+        },
+        [setValueInner, disabled],
+    );
+
     const handleSingleSelection = React.useCallback(
         (option: UseSelectOption<T>) => {
             if (!value.includes(option.value)) {